Vue中的watch屬性可以用來監(jiān)聽一個變量的變化,并執(zhí)行相應(yīng)的操作。該屬性可以有一個參數(shù)數(shù)組,其中的每個參數(shù)代表一個被監(jiān)聽的變量。當(dāng)其中一個變量發(fā)生變化時,相應(yīng)的回調(diào)函數(shù)就會被觸發(fā)。此外,watch屬性還可以包括一個選項(xiàng)對象,用來進(jìn)一步配置此屬性。
watch: {
// 監(jiān)聽變量
variable: function(newValue, oldValue) {
// 回調(diào)函數(shù)
},
// 監(jiān)聽變量2,使用字符串方法
'variable2': {
handler: function(newValue, oldValue) {
// 相應(yīng)操作
},
// 是否立即觸發(fā)回調(diào)函數(shù)
immediate: true,
// 是否深度監(jiān)聽
deep: true
}
}
在watch屬性中,可以直接傳入一個回調(diào)函數(shù),該函數(shù)會被調(diào)用兩個參數(shù),分別是變化后的值和變化前的值。此外,還可以使用字符串的形式來監(jiān)聽一個變量,這種方式與直接傳入回調(diào)函數(shù)的效果是一樣的。
當(dāng)使用對象的形式時,可以通過配置選項(xiàng)來實(shí)現(xiàn)更多的功能。其中,immediate選項(xiàng)用來控制回調(diào)函數(shù)是否需要被立即調(diào)用一次;deep選項(xiàng)用來控制是否需要深度監(jiān)聽變量的變化,即當(dāng)變量的一個屬性發(fā)生變化時是否需要觸發(fā)回調(diào)函數(shù)。
watch: {
// 監(jiān)聽變量
variable: {
handler: function(newValue, oldValue) {
// 回調(diào)函數(shù)
},
// 當(dāng)在該組件內(nèi)被監(jiān)聽的變量的一個屬性變化時,是否也觸發(fā)回調(diào)函數(shù)
deep: true,
// 限制,只有當(dāng)該變量發(fā)生某種變化時才會觸發(fā)回調(diào)函數(shù)
// immediate也是一樣的
// 用法:https://cn.vuejs.org/v2/api/#watch
// ... ...
},
// ... ...
}
除了屬性上的選項(xiàng)之外,Vue還提供了一些其他的方法,來進(jìn)一步控制watch屬性的工作方式。比如,還可以通過Vue.set和Vue.delete方法來增加或刪除被監(jiān)聽對象的某些屬性。在這種情況下,如果沒有開啟deep選項(xiàng),僅僅是監(jiān)聽到了變量本身發(fā)生了變化,但并不會進(jìn)一步監(jiān)聽到其屬性的變化。
總之,watch屬性是Vue非常強(qiáng)大的一個功能,可以讓我們更好地控制數(shù)據(jù)的變化,從而進(jìn)一步改進(jìn)應(yīng)用的用戶體驗(yàn)。如果您還沒有使用過該屬性,不妨嘗試一下,相信您會有不少的收獲。