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