在vue中，使用watch來響應數據的變化。watch的用法大致有三種。下面代碼是watch的一種簡單的用法：
<div id="root"> <input type="text" v-model="cityName"/> </div>
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屬性對對象進行深度監聽。
<input type="text" v-model="cityName"/>
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深度監聽。
注意問題
1、在watch中不要使用箭頭函數，即不應該使用箭頭函數來定義 watcher 函數 , 因為箭頭函數中的this是指向當前作用域。
對於箭頭函數來說，箭頭函數中的 this 指向的是定義時的對象而不是函數運行時所在的對象，即全局定義時的windows對象。
2、開啟深度偵聽后,觸發一次,兩個數據一致,這是vue做了處理
·復雜數據類型的偵聽需要開啟深度偵聽才可以檢測到內部數據的改變,但開啟深度偵聽后,2個參數值是相同的,都是為數據的內存地址,精確到對象的屬性名進行深度偵聽可以解決此問題。
·如果修改復雜類型內部的數據也會觸發，觸發的頻率就回比較高,因為復制類型數據可能多個地方使用,如果都會觸發偵聽器,則會一直執行,因此vue做了這個優化,不發生觸發,如果非要偵聽，可以使用深度偵聽