vue中如何深度监听一个对象？

大家都知道，Vue项目中对数据的监听，提供了一个很好的钩子watch，watch可以极其方便的监听我们常用数据类型值的变化，但通常当我们想监听一个对象中，某个属性值的变化时，很难达到我们预期的效果。那么如何实现对象属性的深度监听呢？

vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

　demo: https://run.iviewui.com/oW2m2Jo7

　直接监听对象--代码如下：

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实现单个属性的深度监听；

　demo: https://run.iviewui.com/7zwv09qd

　代码如下：

 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

vue中如何深度监听一个对象？相关推荐

Vue中数组变动监听
Vue中数组变动监听 Vue的通过数据劫持的方式实现数据的双向绑定,即使用Object.defineProperty()来实现对属性的劫持,但是Object.defineProperty()中的set ...
vue中使用watch监听$route 无效问题
vue 中使用watch监听$route失效问题!在watch里面监听$route变化,发现并没有监听到. 路由: {name: 'secondUser ',component: secondUser ...
[vue] watch怎么深度监听对象变化
[vue] watch怎么深度监听对象变化 deep设置为true 就可以监听到对象的变化let vm=new Vue({el:"#first",data:{msg:{name:' ...
Vue 中使用watch监听$route 无效问题
Vue 中使用watch监听$route失效问题! 今天在项目操作中发现一个问题,在watch里面监听$route变化,发现并没有监听到,查阅了一些资料最终解决,现写出与大家共同分享,也忘出现此问题的 ...
vue watch 经常监听不到_Vue.js中 watch(深度监听)的最易懂的解释
FullName: {{fullName}} FirstName: newVue({ el:'#root', data: { firstName:'Dawei', lastName:'Lou', fu ...
Vue.js中 watch(深度监听-deep)原理以及详解
handler方法和immediate属性这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎 ...
watch中的深度监听
watch 用于观察一个表达式或computed函数在Vue.js实例上的变化.回调函数调用时会从参数得到新数据(new value)和旧数据(old value).表达式只接受以点分割的路径,例如o ...
Vue响应式原理Vue中数据的监听
文章目录 Observer理解如上图 Dep「依赖管理」 Watcher理解如上图总结:Vue响应式原理的核心就是Observer.Dep.Watcher. Vue响应式原理理解以后就知道Vue是怎 ...
vue原理：vue中是如何监听数组变化？
我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就 ...

vue中如何深度监听一个对象？

vue中如何深度监听一个对象？相关推荐

最新文章

热门文章