Vue中的watch是一個非常強大的功能,它可以對對象值進行追蹤和響應。它可以監(jiān)聽一個對象的變化,一旦數(shù)據(jù)發(fā)生改變,就會自動執(zhí)行相應的操作。
// 一個簡單的watch
data: {
a: 1
},
watch: {
a:function(){
console.log('a發(fā)生了變化')
}
}
可以看到,上面的代碼中,我們設置了一個名為a的變量,同時設置了一個watch。我們將a作為watch的key,將其對應的value設置為一個函數(shù),一旦a的值發(fā)生改變,這個函數(shù)就會被調用。
我們可以通過一些參數(shù)來進一步控制watch的行為。比如,我們可以設置deep參數(shù),以監(jiān)聽對象中的深層次變化。
data: {
arr: [
{
a: 1
}
]
},
watch: {
arr: {
handler: function (val, oldVal) {
console.log('arr changed');
},
deep: true
}
}
在上面的例子中,我們監(jiān)聽了一個數(shù)組。我們設置了一個deep參數(shù),以監(jiān)聽數(shù)組中深層次的變化。一旦數(shù)組中的值發(fā)生了改變,我們的函數(shù)就會被調用,打印一句話。
除了設置deep參數(shù),我們還可以設置immediate參數(shù),以在watch被掛載時就執(zhí)行一次操作。同時,我們也可以設置一個字符串形式的watch,來監(jiān)聽某個對象中的某個屬性。
data: {
obj: {
name: '小明',
age: 16
}
},
watch: {
'obj.name': function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
},
obj: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
在上面的例子中,我們可以看到,我們可以直接監(jiān)聽對象中的某個屬性,使得我們的響應更加精細。我們還可以同時對一個對象和其屬性進行監(jiān)聽,來完全控制響應的范圍。
最后,我們也可以在watch中使用程序式的操作,來對數(shù)據(jù)進行更新和改變。比如,我們可以通過Vue.set方法,來動態(tài)添加一個值。
var vm = new Vue({
data: {
items: []
}
})
vm.$watch('items', function (newVal, oldVal) {
// ...
})
vm.items.push({ value: 'Baz' })
在上面的例子中,我們通過Vue.set方法向items數(shù)組中添加了一個值。這個額外的操作也會被watch監(jiān)聽到,并執(zhí)行相應操作。
綜上所述,Vue中的watch功能非常強大,它可以對對象值進行追蹤、監(jiān)聽、響應和更新。通過合理地使用watch,我們可以讓我們的應用程序更加精巧、高效和穩(wěn)健。