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

Question

我试图了解如何正确观察一些道具变化。

我有一个父组件（.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:{
   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
    }
}

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

原文由 Plastic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以为此使用 深度观察者：

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

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

编辑

如果你不想观察顶层对象的每一个变化，而只是想要一种不那么尴尬的语法来直接观察嵌套对象，你可以简单地观察一个 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/

原文由 craig_h 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

另一种比较优雅的好方法如下：

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

（我在 此处的评论 中从@peerbolte 那里学到了这种方法）

原文由 RonC 发布，翻译遵循 CC BY-SA 4.0 许可协议