Vue中的watch屬性可以用于監聽數據變化并進行相應的操作。對于數組類型的數據,Vue也為我們提供了特別的處理方式,可以用來監聽數組內容的變化。
Vue的官方文檔中對于watch數組變化的說明是這樣的:當你利用splice、shift、unshift等方法修改數組時觸發,也就是說當數組本身發生變化時才會觸發回調。
watch: {
list: {
handler(val){
console.log(val)
},
deep: true
}
},
data: {
list: ['A', 'B', 'C']
}
上面的代碼是一個簡單的例子,我們在模板中使用了一個數組list,并在Vue實例中使用watch來監聽其變化。當我們執行list.pop()、list.push()等數組修改方法時會出發回調。如果數組中的元素發生了變化,但是數組本身沒有變化則不會觸發回調。
需要注意的是,watch監聽數組變化有個限制,Vue只能監聽到一級屬性的變化,也就是說如果數組中包含對象,我們無法監聽到對象內的屬性變化。例如:
watch: {
list: {
handler(val){
console.log(val[0].name)
},
deep: true
}
},
data: {
list: [
{ name: 'A' },
{ name: 'B' }
]
}
這段代碼在執行list[0].name = 'C'時不會觸發回調,因為Vue只能監聽到數組的變化,對于數組內的對象屬性變化不敏感。
如果我們想監聽對象內屬性的變化,可以使用Vue提供的$set方法來彌補這個限制。$set方法的作用是在Vue實例的數據中新增一個屬性,并觸發視圖更新。
methods: {
updateName(index, val) {
this.$set(this.list[index], 'name', val)
}
},
data: {
list: [
{ name: 'A' },
{ name: 'B' }
]
}
這段代碼中我們通過調用方法updateName來更新list數組中對象的name屬性,這樣即使數組中的對象屬性變化了,Vue也能檢測到。
如果想要監聽數組的所有變化,可以使用Vue提供的deep屬性將監聽器設置為深度監聽。這樣Vue會遞歸監聽數組內部所有元素以及對象屬性的變化。
watch: {
list: {
handler(val){
console.log(val)
},
deep: true
}
},
data: {
list: [
{ name: 'A' },
{ name: 'B', child: { name: 'BB' } }
]
}
在上面的例子中無論是數組內元素還是對象屬性變化都會觸發回調。
需要注意的是,深度監聽對性能有一定損耗,如果數組過于復雜,建議不要使用deep屬性。
總的來說,Vue提供了watch數組變化的方式可以方便我們對數組變化進行監聽,在一些需要及時響應數組變化的場景中非常有用。