在vue中,使用watch來響應資料的變化。watch的用法大緻有三種。下面代碼是watch的一種簡單的用法:
1 執行個體一:
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName(newName, oldName) {
// ...
}
}
})
直接寫一個監聽處理函數,當每次監聽到 cityName 值發生改變時,執行函數。也可以在所監聽的資料後面直接加字元串形式的方法名:
watch: {
cityName: 'nameChange'
}
}
執行個體二:
immediate和handler
這樣使用watch時有一個特點,就是當值第一次綁定的時候,不會執行監聽函數,隻有值發生改變才會執行。如果我們需要在最初綁定值的時候也執行函數,則就需要用到immediate屬性。
比如當父元件向子元件動态傳值時,子元件props首次擷取到父元件傳來的預設值時,也需要執行函數,此時就需要将immediate設為true。
new Vue({
el: '#root',
data: {
cityName: ''
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
immediate: true
}
}
})
監聽的資料後面寫成對象形式,包含handler方法和immediate,之前我們寫的函數其實就是在寫這個handler方法;
immediate表示在watch中首次綁定的時候,是否執行handler,值為true則表示在watch中聲明的時候,就立即執行handler方法,值為false,則和一般使用watch一樣,在資料發生變化的時候才執行handler。
deep
當需要監聽一個對象的改變時,普通的watch方法無法監聽到對象内部屬性的改變,隻有data中的資料才能夠監聽到變化,此時就需要deep屬性對對象進行深度監聽。
new Vue({
el: '#root',
data: {
cityName: {id: 1, name: 'shanghai'}
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
})
執行個體三
設定deep: true 則可以監聽到cityName.name的變化,此時會給cityName的所有屬性都加上這個監聽器,當對象屬性較多時,每個屬性值的變化都會執行handler。如果隻需要監聽對象中的一個屬性值,則可以做以下優化:使用字元串的形式監聽對象屬性:
watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
這樣隻會給對象的某個特定的屬性加監聽器。
數組(一維、多元)的變化不需要通過深度監聽,對象數組中對象的屬性變化則需要deep深度監聽。
詳細的文檔,請看:
https://www.cnblogs.com/jin-zhe/p/9319648.html
https://www.cnblogs.com/williamjie/p/11155166.html