Vue学习（五）侦听属性全攻略

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

一、vm.$watch() 

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

• 参数：

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

• 返回值：{Function} unwatch

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

情况一：不使用immediate: true，在回调函数外使用unwatch()，回调函数一次都不会触发

情况二：不使用immediate: true，回调函数内使用unwatch()，回调函数只触发一次

情况三：使用immediate: true，在回调函数外使用unwatch()，回调函数被调用一次

情况四：使用immediate: true，并在回调函数内使用unwatch()，回调函数被调用两次

注意：immediate: true立即以表达式的当前结果触发回调，也就是回调函数会被执行两次，一次是vue实例化之后，一次是a发生变化

二、watch

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

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

          watch: { 
                a: function (val, oldVal) { 
                    console.log('new: %s, old: %s', val, oldVal) 
                }, 
                // 方法名 
                b: 'someMethod', 
                // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 
                c: { 
                    handler: function (val, oldVal) {
                     /* ... */ 
                    }, 
                    deep: true 
                }, 
                // 该回调将会在侦听开始之后被立即调用 
                d: { 
                    handler: 'someMethod', 
                    immediate: true 
                }, 
　　　　　　　　　// 值是数组：如果监听的是非对象，会顺序执行数组中的每一个方法，如果监听的是对象，只会执行设置了deep：true的方法
                e: [ 
                    'handle1', 
                    function handle2 (val, oldVal) {
                         /* ... */ 
                    }, 
                    { 
                        handler: function handle3 (val, oldVal) { 
                            /* ... */ 
                        }, /* ... */ 
                    },
　　　　　　　　　　　　{
　　　　　　　　　　　　　　handler: function(val, oldval){
　　　　　　　　　　　　　　　　/*....*/
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　deep:true
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　handler: 'handler2'
　　　　　　　　　　　　}

                ], 
                // 可以直接监听对象的指定属性
                'e.f': function (val, oldVal) { /* ... */ } 
            }, 

注意：除了deep外还有immediate，immediate：true立即以表达式的当前值触发回调（表示创建组件时回调函数执行一次，类似在created中调用函数，当监听的值发生变化时，回调函数会再次执行）

                var vm = new Vue({
            data:{
                json:{
                    name:'kkkk',
                    age:212
                }
            },
            methods:{
                show(){
                    console.log(2)
                }
            },
            watch:{
                json:[
                    {
                        handler:'show',
                        deep:true,
                        immediate:true // vue实例创建后立马调用show（）
                    }
                ]
            }
        }).$mount('#box');
        document.onclick = function() {
            vm.json.age = 666
        }

案例 

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

可以优化为：

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}

参考

vue官网教程：侦听器watch

vue官网api：侦听器 watch

vue官网api：侦听器$watch