vue note about watch

vue note 续篇 watch

watch

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

watch: {
   // 如果 data的`question` 发生改变，这个函数就会运行
   question: function (newQuestion, oldQuestion) {
     this.answer = 'Waiting for you to stop typing...'
     this.dosomthing()
   }
 },

实例方法

vm.$watch( expOrFn, callback, [options] )
参数：

{String | Function} expOrFn
{Function | Object} callback
{Object} [options]
	{Boolean} deep
	{Boolean} immediate
返回值：{Function} unwatch

注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

实例

// 键路径
vm.$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 = vm.$watch('a', cb)
// 之后取消观察
unwatch()

选项：deep
为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
1
2
3
4
5
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
选项：immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：
1
2
3
4
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的当前值触发回调