2019-12-28 seo達人
在Vue中，用watch來響應(yīng)數(shù)據(jù)的變化，示例代碼如下，
第一種方式
<input type="text" v-model="userName"/>
//監(jiān)聽當userName值發(fā)生變化時觸發(fā)
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
第一種方式有一個缺點： 就是當值第一次綁定的時候 不會執(zhí)行監(jiān)聽函數(shù)，只有當值改變的時候才會執(zhí)行。
如果我們想在第一次綁定的時候執(zhí)行此監(jiān)聽函數(shù)，則需要設(shè)置immediate為true。比如當父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的默認值時，也需要執(zhí)行函數(shù)，此時就需要將immediate設(shè)為true。
第二種方式
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
immediate表示在watch中首次綁定的時候，是否執(zhí)行handler，值為true則表示在watch中聲明的時候，就立即執(zhí)行handler方法，值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時候才執(zhí)行handler。
當需要監(jiān)聽一個對象的改變時，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化，此時就需要deep屬性對對象進行深度監(jiān)聽。
第三種方式
<input type="text" v-model="cityName.name" />
data (){
return {
cityName:
{
name:'北京',
location: '中國'
}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
注：監(jiān)測為對象的時候，newVal == oldVal
此時會給cityName的所有屬性都加上監(jiān)聽函數(shù)，如果屬性較多時，每個屬性值的變化都會執(zhí)行handler。如果只需要監(jiān)聽對象中的一個屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽對象屬性：
watch: {
'cityName.name': {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
數(shù)組的變化不需要深度監(jiān)聽;
在watch中不要使用箭頭函數(shù)，因為箭頭函數(shù)中的this是指向當前作用域.
藍藍設(shè)計的小編 http://www.shtzxx.cn