【vue】监听属性watch

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

效果展示：