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