Vue.js 如何在 data 里含数组的情况下，监听数组内指定属性的变化？

Question

在含有数组的时候，不知道watch里该如何写，可以监听单个属性值的变化（而不是监听整个数组的变化）。代码如下：data: {    items: {        [            {                'name': 'zxxxx',                'a': false,                'b': true            },            {                'name': 'zxxxx',                'a': false,                'b': true            },            {                'name': 'zxxxx',                'a': false,                'b': true            }        ];    }},watch:{    items:{        handler:function(val,old){            // code...        },        deep:true    }}如果 items 里没有数组结构，直接是键值对，watch 里可以写成 items.key，但是有了数组，不知道该怎么写了。上面的代码是深度监听，不仅过重，有时甚至无法达到想要的效果。求指教~

Answer 1

1. 如果你要监听某个索引的某个属性也是能写的。。。

   watch: {    'items.2.name': foo
   }

2. 如果是所有子项的某类属性，先使用计算属性做个计算（比如字符串全部拼接，数字求和）,然后watch这个计算属性，来获取属性变化的实际，但是不能准确具体的拿到变化的值的位置信息（index、key）。

3. 然后我觉得你可以换种解决方式，你的最终逻辑目的是什么，值的变化是什么引起的？能不能从操作的地方入手，比如是用户使用input修改了这个值，能不能提交的时候直接提供index和key属性，直接获取变化位置呢？

Answer 2

除了一个一个写外，比如监听数组0中的name，就写成'items.0.name'，显然这不现实。

还有一个方法是将你要用到的数组中的数据写在computed中，然后去监听这个computed的值，当数组变化时也会触发watch。

computed: {

    itemsA: function () {

        let a = this.items.forEach( () => XXX)

        return a

    }

}

watch:{

      itemsA:{

        handler:function(val,old){

          console.log(val,old)

        },

      }

},