Vue中watch⽤法详解
基本⽤法：
FullName:{{fullName}}
FirstName:
newVue({
el:'#root',
data:{
firstName:'Dawei',
lastName:'Lou',
fullName:''
},
watch:{
firstName(newName,oldName){
me=newName+''+me;
}
}
})
handler⽅法和immediate属性：
上⾯的例⼦是值变化时候，watch才执⾏，我们想让值最初时候watch就执⾏就⽤到了handler和immediate属性
watch:{
firstName:{
handler(newName,oldName){
me=newName+''+me;
},
//代表在wacth⾥声明了firstName这个⽅法之后⽴即先去执⾏handler⽅法，如果设置了fal，那么效果和上边例⼦⼀样
immediate:true
}
}
deep属性（深度监听，常⽤语对象下⾯属性的改变）：
obj.a:{{obj.a}}
obj.a:
newVue({
el:'#root',
data:{
obj:{
a:123
}
},
watch:{
obj:{
handler(newName,oldName){
('ed');
},
immediate:true
}
}
})
我们在在输⼊框中输⼊数据视图改变obj.a的值时，我们发现是⽆效的。受现代JavaScript的限制(以及废弃e)，Vue不能检测
到对象属性的添加或删除。由于Vue会在初始化实例时对属性执⾏getter/tter转化过程，所以属性必须在data对象上存在才能让Vue转
换它，这样才能让它是响应的。
默认情况下handler只监听obj这个属性它的引⽤的变化，我们只有给obj赋值的时候它才会监听到，⽐如我们在mounted事件钩⼦函数中对
obj进⾏重新赋值：
mounted:{
={
a:'456'
}
}
那么我们需要监听obj⾥的属性a的值呢？这时候deep属性就派上⽤场了:
watch:{
obj:{
handler(newName,oldName){
('ed');
},
immediate:true,
deep:true
}
}
这样的⽅法对性能影响很⼤，修改obj⾥⾯任何⼀个属性都会触发这个监听器⾥的handler。我们可以做如下处理：
watch:{
'obj.a':{
handler(newName,oldName){
('ed');
},
immediate:true,
//deep:true
}
}
watch的注销这⾥就不在多说了，实际开发中，watch会随着组件⼀并销毁。
本文发布于:2022-11-15 07:43:04，感谢您对本站的认可！
本文链接：http://www.wtabcd.cn/fanwen/fan/88/22937.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
