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: 'fast' } } } }, watch:{ studen:{ handler: 'sayName', deep: true } }, methods:{ sayName(){ console.log(this.studen) } }
设置deep为true后,无论嵌套多深,只要属性值被改变都会触发监听。但这种方式开销会较大,监听器会一层一层往下找,为每个属性添加监听器。
如果我们只是监听对象的某个属性改变时,可以这样做:
watch:{ 'studen.name':{ handler: 'sayName' } }
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) } }