vue工作开发总结（三）---- watch 高阶使用

立即执行

watch是在监听属性改变才会触发，有些时候，我们希望在组件创建后watch能够立即执行

可能想到的方法就是在create声明周期中调用一次，但是这样的写法不优雅，获取我们可以使用这样的方法：

export default{
    data(){
        return {
            name:"wangwei",
        }
    },
    watch:{
        name:{
            handler:"sayName",
            immediate:true,
        }
    },
    methods:{
        sayName(){
            console.log(this.name);
        }
    }
}

 

深度监听

export default {
    data(){
        return {
            sutdent:{
                name:"wangwei",
                skill:{
                    run:{
                        speed:'fast'
                    }
                }
            }
        }
    },
    watch:{
        student:{
            handler:"sayName",
            deep:true
        }
    },
    methods:{
        sayName(){
            console.log(this.student)
        }
    }
}

 

触发监听执行多个方法

使用数组可以设置多项。形式包括字符窜、函数、对象

export default {
    data:{
        name:"wangwei",
    },
    watch:{
        name:[
            'sayName',
            function(newval,oldval){
                this.sayName2();
            },{
                hander:"sayName3",
                immaediate:true
            }
        ]
    },
    methods:{
        sayName(){
            alert(this.name+"111")
        },
        sayName2(){
            alert(this.name+"222")
        },
        sayName3(){
            alert(this.name+"333")
        }
    }
}

 文档查看地址https://cn.vuejs.org/v2/api/#watch

 

watch 监听多个变量

watch本身无法监听多个变量，但我们可以将需要监听的多个变量通过计算属性返回对象，在监听这个对象来实现 ----监听多个变量

在监听对象时，对象内部的属性被改变时无法触发watch，我们可以为其设置深度监听

export default {
    data(){
        return {
            msg1:"apple",
            msg2:"banana",
        }
    },
    computed:{
        msgobg(){
            const {msg1,msg2} = this;
            return {msg1,msg2}
        }
    },
    watch:{
        msgobj:{
            handler(newval,odval){
                if(newval.msg1 !=oldval.msg1){
                    //在这里处理数据
                    console.log('msg1 is change')
                }
                if(newval.msg2 !=oldval.msg2){
                    //在这里处理数据
                    console.log('msg2 is change')
                }
            },
            deep:true
        }
    }
}