监视事件在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('评论发表成功!')
}
})
效果展示：
