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

如果你要监听某个索引的某个属性也是能写的。。。watch: {    'items.2.name': foo }如果是所有子项的某类属性，先使用计算属性做个计算（比如字符串全部拼接，数字求和）,然后watch这个计算属性，来获取属性变化的实际，但是不能准确具体的拿到变化的值的位置信息（index、key）。然后我觉得你可以换种解决方式，你的最终逻辑目的是什么，值的变化是什么引起的？能不能从操作的地方入手，比如是用户使用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)        },      }},