vue中 watch 监听器的使用

watch
watch：一个对象，键是需要观察的表达式，值是对应回调函数，也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch()，遍历 watch 对象的每一个 property。

deep: true：将会深度监听对象的 property改变时，被调用。

immediate: true：将会载监听开始之后立即调用。

注意：不应该使用箭头函数来定义 watcher 函数(例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

this.$watch
用法：观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。

// 键路径
this.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})
// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

vm.$watch 返回一个取消观察函数，用来停止触发回调：

var unwatch = this.$watch('a', cb)
// 之后取消观察
unwatch()

 

1.deep

为了发现对象内部值的变化，可以载选项参数中指定 deep:true。

this.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123

 

2.immediate

在选项中指定 immediate:true 将立即以表达式的当前值触发回调。

this.$watch('a', callback, {
immediate: true
})

 

注意在带有 immediate 选项时，你不能在第一次回调时取消监听给定的 property。你需要先检查其函数的可用性：

var unwatch = this.$watch('value', function () {
doSomething()
if (unwatch) unwatch()
},
{ immediate: true }
)