watch 主要应用于某些数据变化时,会执行某些操作,下面我们来看看watch的用法
1、普通用法 data:{ firstName:'Ye' }, watch:{ firstName:function(oldVal,newVal){ console.log("lastName") }, } 简单监视,只要firstName有变化,就会执行函数里面的方法
2、用法二 watch:{ lastName:{ handler:function(){ console.log("invole lastName") }, immediate:true//第一次进来就开始监视,而不是等到下次数据改变了才执行 }, } immediate:true表示第一次进入的时候,就会监视lastName的值,如果为false,第一次进入是不会监视的,只有等到监视的数据变化了才会执行
3、用法三,监视对象 watch:{ obj:{ handler(oldVal,newVal){ console.log("objfixed") }, immedaite:true, deep:true,//对象的任何属性修改了都会监视到, } } deep:false 监视obj对象,如果只是修改了对象的某些属性,监视不到obj的变化,只有obj整个有变化之后, 才会执行方法。 deep:true,只要修改obj里面的任意属性,都会执行handler里面的方法。这样的话,开销就会比较大。解决方法看用法四。
4、用法四 监视对象的某个属性 data:{ obj:{ a:'123', b:'456' } } watch:{ 'obj.a':{ handler(oldVal,newVal){ console.log("objfixed a") }, immedaite:true, } } vue会一层一层地解析这个对象的所有属性,当检查到最后一个属性时,他才会去监听他真正想监听的那个属性。
注意:无论是watch还是computed,最可能的不要去修改你依赖的那个属性,否则很容易出现一个无限循环的问题 'obj.a':{ handler(oldVal,newVal){ console.log("objfixed a") this.obj.a += 1; }, immedaite:true, }
作者:Amy_yqh
链接:https://www.jianshu.com/p/9989e07d6dbe
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦