vue中的watch侦听属性的使用

vue中的watch侦听属性的使用方法

详解:

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

注意:

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

定义方法:

1. 函数

a: function (val, oldVal) {//a为被侦听状态名
      console.log(val, oldVal)
    },

2. 调用方法

 b: 'someMethod',//调用方法
 
methods: {
            someMethod(val, oldVal) {
                conlose.log(val, oldVal)
            }
     }

3. 深度监听

// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },

    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },

5. 回调数组

// 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ]

6. 在不深度侦听的情况下,侦听某对象内的某个值的改变

// 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ]

本文地址：https://blog.csdn.net/wys997/article/details/107393096