監視事件在vue中的使用還是很廣泛的，今天來介紹一下。
對watch的簡單理解：
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。
示例：
// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做點什麼
})
// 函數
vm.$watch(
function () {
// 表達式 `this.a + this.b` 每次得出一個不同的結果時
// 處理函數都會被調用。
// 這就像監聽一個未被定義的計算屬性
return this.a + this.b
},
function (newVal, oldVal) {
// 做點什麼
}
)
常用參數介紹：
1、handler:其值是一個回調函數。即監聽到變化時應該執行的函數。
2、immediate: 在選項參數中指定 immediate: true 將立即以表達式的當前值觸發回調
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的當前值觸發回調
3、爲了發現對象內部值的變化，可以在選項參數中指定 deep: true 。注意監聽數組的變動不需要這麼做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
實戰應用：
之前做的一個小項目要實現評論數量的實時更新，這裏我用監聽很好地實現了這一需求。
1、監聽data，如果data的值發生變化，執行Handler裏面的方法
watch: {
'data': {
handler(data) {
this.queryComment()
}
}
}
2、發表評論成功，data+1使data數值發生變化
insertcomment(goComment).then(response => {
if (response.code === '0000') {
this.data += 1
this.comment = ''
this.answerCommentCount++
Toast('評論發表成功!')
}
})
效果展示：
