• watch

    watch

    • 类型：{ [key: string]: string | Function | Object | Array }

    • 详细：

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

    • 示例：
    1. var vm = new Vue({
    2.   data: {
    3.     a: 1,
    4.     b: 2,
    5.     c: 3,
    6.     d: 4,
    7.     e: {
    8.       f: {
    9.         g: 5
    10.       }
    11.     }
    12.   },
    13.   watch: {
    14.     a: function (val, oldVal) {
    15.       console.log('new: %s, old: %s', val, oldVal)
    16.     },
    17.     // 方法名
    18.     b: 'someMethod',
    19.     // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    20.     c: {
    21.       handler: function (val, oldVal) { /* ... */ },
    22.       deep: true
    23.     },
    24.     // 该回调将会在侦听开始之后被立即调用
    25.     d: {
    26.       handler: 'someMethod',
    27.       immediate: true
    28.     },
    29.     e: [
    30.       'handle1',
    31.       function handle2 (val, oldVal) { /* ... */ },
    32.       {
    33.         handler: function handle3 (val, oldVal) { /* ... */ },
    34.         /* ... */
    35.       }
    36.     ],
    37.     // watch vm.e.f's value: {g: 5}
    38.     'e.f': function (val, oldVal) { /* ... */ }
    39.   }
    40. })
    41. vm.a = 2 // => new: 2, old: 1

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

    • 参考：实例方法 / 数据 - vm.$watch