Vue.js -如何正确地监视嵌套数据

我在试着理解如何正确地观察一些道具的变化。我有一个父组件(。Vue文件)，从ajax调用接收数据，把数据放在一个对象中，并使用它来通过v-for指令渲染一些子组件，下面是我的实现的简化:

<template>
  <div>
    <player v-for="(item, key, index) in players"
      :item="item"
      :index="index"
      :key="key"">
    </player>
  </div>
</template>

．.．然后在<script>标签内:

 data(){
     return {
         players: {}
 },
 created(){
        let self = this;
        this.$http.get('../serv/config/player.php').then((response) => {
            let pls = response.body;
            for (let p in pls) {
                self.$set(self.players, p, pls[p]);
            }
    });
}

Item对象是这样的:

item:{
   prop: value,
   someOtherProp: {
       nestedProp: nestedValue,
       myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
    },
}

现在，在我的孩子“播放器”组件中，我试图观察任何项目的属性变化，我使用:

...
watch:{
    'item.someOtherProp'(newVal){
        //to work with changes in "myArray"
    },
    'item.prop'(newVal){
        //to work with changes in prop
    }
}

这是可行的，但对我来说似乎有点棘手，我想知道这是否是正确的方法。我的目标是每次道具改变或myArray获得新元素或现有元素中的一些变化时执行一些操作。任何建议都将不胜感激。

当前回答

我使用了deep:true，但发现在监视函数中的新旧值始终是相同的。作为之前解决方案的替代方案，我尝试了这个，它将通过将整个对象转换为字符串来检查它的任何变化:

created() {
    this.$watch(
        () => JSON.stringify(this.object),
            (newValue, oldValue) => {
                //do your stuff                
            }
    );
},

2020-12-23 18:52:57

其他回答

你可以使用深层观察者:

watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

现在它将检测对项目数组中对象的任何更改以及对数组本身的添加(当与Vue.set一起使用时)。这是一个JSFiddle: http://jsfiddle.net/je2rw3rs/

EDIT

如果你不想观察顶层对象的每一个变化，只是想要一个不那么尴尬的语法来直接观察嵌套对象，你可以简单地观察一个computed:

var vm = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

这是JSFiddle: http://jsfiddle.net/oa07r5fw/

2017-02-09 10:28:27

我对使用deep: true的公认答案的问题是，当深度观察一个数组时，我不能轻易地识别数组中的哪个元素包含了更改。我找到的唯一明确的解决方案是这个答案，它解释了如何制作一个组件，以便您可以单独观察每个数组元素。

2018-12-06 22:33:31

另一种补充方法是，我曾经“破解”这个解决方案是这样做的: 我设置了一个单独的计算值，它将简单地返回嵌套的对象值。

data : function(){
    return {
        countries : {
            UnitedStates : {
                value: "hello world";
            }.
        },
    };
},
computed : {
    helperName : function(){
        return this.countries.UnitedStates.value;
    },
},
watch : {
    helperName : function(newVal, oldVal){
        // do this...
    }
}

2019-06-13 19:42:30

对于任何寻找Vue 3的人


import { watch } from 'vue';

...
...

watch(
  () => yourNestedObject,              // first param, your object
  (currValue, prevValue) => {          // second param, watcher callback
    console.log(currValue, prevValue);
  },
  { deep: true }                       // third param, for deep checking
);

您可以在这里参考文档:https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watch

2021-11-23 14:08:52

这些答案对我来说都没用。实际上，如果你想观察嵌套的数据与组件被多次调用。所以他们被称为不同的道具来识别他们。例如<MyComponent chart="chart1"/> <MyComponent chart="chart2"/> 我的解决方法是创建一个额外的vuex状态变量，我手动更新它以指向上次更新的属性。

这是一台Vuex。Ts实现示例:

export default new Vuex.Store({
    state: {
        hovEpacTduList: {},  // a json of arrays to be shared by different components, 
                             // for example  hovEpacTduList["chart1"]=[2,6,9]
        hovEpacTduListChangeForChart: "chart1"  // to watch for latest update, 
                                                // here to access "chart1" update 
   },
   mutations: {
        setHovEpacTduList: (state, payload) => {
            state.hovEpacTduListChangeForChart = payload.chart // we will watch hovEpacTduListChangeForChart
            state.hovEpacTduList[payload.chart] = payload.list // instead of hovEpacTduList, which vuex cannot watch
        },
}

在任何Component函数上更新存储:

    const payload = {chart:"chart1", list: [4,6,3]}
    this.$store.commit('setHovEpacTduList', payload);

现在对任何组件进行更新:

    computed: {
        hovEpacTduListChangeForChart() {
            return this.$store.state.hovEpacTduListChangeForChart;
        }
    },
    watch: {
        hovEpacTduListChangeForChart(chart) {
            if (chart === this.chart)  // the component was created with chart as a prop <MyComponent chart="chart1"/> 
                console.log("Update! for", chart, this.$store.state.hovEpacTduList[chart]);
        },
    },

2020-02-25 14:57:00

Vue.js -如何正确地监视嵌套数据

推荐文章

最新文章

标签