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

谁借莪１个温暖的怀抱￠ 2021-09-08 16:30 298阅读 0赞

立即执行

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
            }
        }
    }