• 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