Vue - watch高阶用法
Posted chanwahfung
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue - 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) ,
watch文档:https://cn.vuejs.org/v2/api/#watch
以上是关于Vue - watch高阶用法的主要内容,如果未能解决你的问题,请参考以下文章