很多时候,我们监听一个属性,不会使用到改变前后的值,只是为了执行一些方法,这时可以使用字符串代替
data:{ name:'joe' }, watch:{ name:'sayname' }, methods:{ sayname(){ console.log(this.name) } }
总所周知,watch是在监听属性改变时才会触发,有些时候,我们希望在组件创建后watch能够立即执行一次。
可能想到的的方法就是在create生命周期中调用一次,但这样的写法不优雅,或许我们可以使用这样的方法
data:{ name:'joe' }, watch:{ name:{ handler: 'sayname', immediate: true } }, methods:{ sayname(){ console.log(this.name) } }
上面我们给入一个对象
handelr: 触发监听执行的方法(需要用到改变前后的值时,可换成函数)
immediate: 监听开始之后被立即调用
在监听一个对象时,当对象内部的属性被改变时,无法触发watch,我们可以继续使用对象的方式为其设置深度监听
data:{ studen: { name:'joe', skill:{ run:{ speed: '5m/s' } } } }, watch:{ studen:{ handler: 'sayname', deep: true } }, methods:{ sayname(){ console.log(this.studen) } }
设置deep为true后,无论嵌套多深,只要属性值被改变都会触发监听
使用数组可以设置多项,形式包括字符串、函数、对象
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文档:
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论