在開發Vue項目的時候,我們時常會使用watch來監聽變量或者對象的值變化,從而觸發一些邏輯。然而,有時候我們會經歷這樣的情況:我們已經正常定義了watch,但是它并沒有被觸發,這讓我們感到非常困惑。
那么,究竟有哪些原因會導致Vue的watch無法觸發呢?下面是一些例子,讓我們來探究一下:
watch: {
myValue: function () {
console.log('watch')
}
},
created() {
this.myValue = true
console.log('created')
}
在這個例子中,我們定義了一個watch監聽myValue的變化。在created生命周期中,我們改變了myValue的值,但是watch并沒有被觸發。這是因為在created生命周期中,剛剛定義的watch還沒有被建立檢測器與vm中的data進行關聯。也就是說,在created生命周期中設置數據時,watch并沒有開始監聽數據改變。
data() {
return {
myValue: false
}
},
watch: {
myValue: function () {
console.log('watch')
},
immediate: true
}
在這個例子中,我們定義了一個watch監聽myValue的變化,并添加了 immediate 選項。然而,當我們啟動應用程序時,watch的回調函數并沒有被觸發。這是因為需要Vue 2.2.0+才能使用immediate屬性,并且它在舊的版本中不起作用。
watch: {
myValue: function () {
console.log('watch')
},
deep: true
},
created() {
let myObj = {
name: {
firstName: 'John',
lastName: 'Doe'
}
}
this.myValue = myObj
console.log('created')
}
在這個例子中,我們定義了一個watch監聽myValue的變化,并使用了deep選項來監聽對象的每一層屬性的變化。在created生命周期中,我們設置了一個myObj對象值,并給它的屬性name賦值。然而,watch并沒有被觸發。這是因為Vue的雙向綁定是根據對象的引用觸發的,只有在引用發生變化時,watch才會被觸發。在這里,我們剛剛改變了對象屬性的值,但是對象本身的引用并沒有發生改變,因此watch并沒有被觸發。
在開發過程中,由于各種原因導致watch無法觸發真的是很困惑。但是,通過仔細研究并發現問題原因,我們可以快速解決這些問題。因此,學習Vue的watch及其相關特性是非常重要的。