vue watch用法

vue的常见写法：

var vm = new Vue({

el: '#demo',

data: {

    firstName: 'Foo',

    lastName: 'Bar',

    fullName: 'Foo Bar'

},

watch:

{

    firstName: function (val) {

        this.fullName = val + ' ' + this.lastName

    },

    lastName: function (val) { t

        his.fullName = this.firstName + ' ' + val

    }

}

})

---

watch的几种常见写法：

watch:{

        firstName: function(newValue, oldValue) {}，

        // 其中newValue为新的值，oldValue为旧值

        b: 'someMethod'

        // 回调函数名

       c: {

        // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深,deep 即为设置的关键参数，不设置时只能监听一层

                handler: function(val, oldVal){ /* ... */ },

                deep: true

            }，

      d: {

            // immediate参数代表回调会在侦听开始之后立即被调用

            handler: 'someMethod',

            immediate: true

        },

        // 你可以传入回调数组，它们会被逐一调用 

     e: [

          'handle1',

          function handle2(val, oldVal){ /* ... */ },

          {

                handler: function handle3(val, oldVal){ /* ... */ },

                /* ... */      

            }

        ],

        // watch vm.e.f's value: {g: 5}  ,监听e.f的变化    

        'e.f': function(val, oldVal){ /* ... */ }

}

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

参考文档：https://cn.vuejs.org/v2/api/#watch