<button id="2aosa"></button>

Vue.js 如何在 data 里含數(shù)組的情況下，監(jiān)聽數(shù)組內(nèi)指定屬性的變化？

在含有數(shù)組的時候，不知道watch里該如何寫，可以監(jiān)聽單個屬性值的變化（而不是監(jiān)聽整個數(shù)組的變化）。

代碼如下：

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 里沒有數(shù)組結(jié)構，直接是鍵值對，watch 里可以寫成 items.key，但是有了數(shù)組，不知道該怎么寫了。上面的代碼是深度監(jiān)聽，不僅過重，有時甚至無法達到想要的效果。求指教~

回答

編輯回答

青瓷

如果你要監(jiān)聽某個索引的某個屬性也是能寫的。。。
```
watch: {
    'items.2.name': foo
}
```
如果是所有子項的某類屬性，先使用計算屬性做個計算（比如字符串全部拼接，數(shù)字求和）,然后watch這個計算屬性，來獲取屬性變化的實際，但是不能準確具體的拿到變化的值的位置信息（index、key）。
然后我覺得你可以換種解決方式，你的最終邏輯目的是什么，值的變化是什么引起的？能不能從操作的地方入手，比如是用戶使用input修改了這個值，能不能提交的時候直接提供index和key屬性，直接獲取變化位置呢？

2018年5月30日 09:50

編輯回答

孤慣

除了一個一個寫外，比如監(jiān)聽數(shù)組0中的name，就寫成'items.0.name'，顯然這不現(xiàn)實。
還有一個方法是將你要用到的數(shù)組中的數(shù)據(jù)寫在computed中，然后去監(jiān)聽這個computed的值，當數(shù)組變化時也會觸發(fā)watch。

computed: {
    itemsA: function () {
        let a = this.items.forEach( () => XXX)
        return a
    }
}
watch:{
      itemsA:{
        handler:function(val,old){
          console.log(val,old)
        },
      }
},

2018年1月15日 09:24