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)
        },
      }
},