Vue中watch高阶用法

摘要：很多时候，我们监听一个属性，不会使用到改变前后的值，只是为了执行一些方法，这时可以使用字符串代替；总所周知，watch是在监听属性改变时才会触发，有些时候，我们希望在组件创建后watch能够立即执行一次。

1. 不依赖新旧值的watch

很多时候，我们监听一个属性，不会使用到改变前后的值，只是为了执行一些方法，这时可以使用字符串代替

data:{
    name:'Joe'
},
watch:{
    name:'sayName'
},
methods:{
    sayName(){
        console.log(this.name)
    }
}

2.立即执行watch

总所周知，watch是在监听属性改变时才会触发，有些时候，我们希望在组件创建后watch能够立即执行一次。可能想到的的方法就是在create生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法

data:{
    name:'Joe'
},
watch:{
    name:{
        handler: 'sayName',
        immediate: true
    }
},
methods:{
    sayName(){
        console.log(this.name)
    }
}

上面我们给入一个对象

handelr：触发监听执行的方法（需要用到改变前后的值时，可换成函数）
immediate：监听开始之后被立即调用

3. 深度监听

在监听一个对象时，当对象内部的属性被改变时，无法触发watch，我们可以继续使用对象的方式为其设置深度监听

data:{
    studen: {
        name:'Joe',
        skill:{
            run:{
                speed: '5m/s'
            }
        }
    }
},
watch:{
    studen:{
        handler: 'sayName',
        deep: true
    }
},
methods:{
    sayName(){
        console.log(this.studen)
    }
}

设置deep为true后，无论嵌套多深，只要属性值被改变都会触发监听

4.监听执行多个方法

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

data:{
    name:'Joe'
},
watch:{
    name:[
        'sayName1',
        function(newVal, oldVal){
              this.sayName2()
        },
        {
            handler: 'sayName3',
            immaediate: true
        }
    ]
},
methods:{
    sayName1(){
        console.log('sayName1==>', this.name)
    },
    sayName2(){
        console.log('sayName2==>', this.name)
    },
    sayName3(){
        console.log('sayName3==>', this.name)
    },
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5199