大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
- vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;
-
- 直接监听对象--代码如下:
1 watch:{ 2 obj:{ //监听的对象 3 deep:true, //深度监听设置为 true 4 handler:function(newV,oldV){ 5 console.log(‘watch中:‘,newV) 6 } 7 } 8 }
- 直接监听对象--代码如下:
-
- 监听对象下某个属性--代码如下:
data () { return { obj:{ name:‘夜空中最亮的星星‘, age:18 } } }, watch:{ ‘obj.name‘:{ deep:true, handler:function(newV,oldV){ console.log(‘watch中:‘,newV) } } }
- 监听对象下某个属性--代码如下:
2.利用computed配合watch实现单个属性的深度监听;
-
- 代码如下:
1 data () { 2 return { 3 obj:{ 4 name:‘夜空中最亮的星星‘, 5 age:18 6 } 7 } 8 }, 9 computed:{ 10 name(){ 11 return this.obj.name; 12 } 13 }, 14 watch:{ 15 name(newV){ 16 console.log(‘watch中name为:‘,newV) 17 } 18 }
- 代码如下:
原文地址:https://www.cnblogs.com/yuzhongyu/p/10444043.html
时间: 2024-11-05 21:48:25