• vm.$watch( expOrFn, callback, [options] )

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

    • 参数：

      • {string | Function} expOrFn
      • {Function | Object} callback
      • {Object} [options]
        • {boolean} deep
        • {boolean} immediate

    • 返回值：{Function} unwatch

    • 用法：

    观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

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

    • 示例：
    1. // 键路径
    2. vm.$watch('a.b.c', function (newVal, oldVal) {
    3.   // 做点什么
    4. })
    6. // 函数
    7. vm.$watch(
    8.   function () {
    9.     // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    10.     // 处理函数都会被调用。
    11.     // 这就像监听一个未被定义的计算属性
    12.     return this.a + this.b
    13.   },
    14.   function (newVal, oldVal) {
    15.     // 做点什么
    16.   }
    17. )

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

    1. var unwatch = vm.$watch('a', cb)
    2. // 之后取消观察
    3. unwatch()
    • 选项：deep

    为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

    1. vm.$watch('someObject', callback, {
    2.   deep: true
    3. })
    4. vm.someObject.nestedValue = 123
    5. // callback is fired
    • 选项：immediate

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

    1. vm.$watch('a', callback, {
    2.   immediate: true
    3. })
    4. // 立即以 `a` 的当前值触发回调

    注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。

    1. // 这会导致报错
    2. var unwatch = vm.$watch(
    3.   'value',
    4.   function () {
    5.     doSomething()
    6.     unwatch()
    7.   },
    8.   { immediate: true }
    9. )

    如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：

    1. var unwatch = vm.$watch(
    2.   'value',
    3.   function () {
    4.     doSomething()
    5.     if (unwatch) {
    6.       unwatch()
    7.     }
    8.   },
    9.   { immediate: true }
    10. )