vue watch对象的所有属性

 let obj = {
        a: {type: 'type1'},
        b: {type: 'type2'},
        c: {type: 'type3'},
        ...
    }
    
假设我有一个对象,其中有多个不同(不确定长度)的属性,当不同的属性发生变化时所做的操作也是不同的,
所以不能直接watch obj本身,那我该怎么样去watch到obj当前哪个属性发生变化呢
既要监听有没有属性,又要监听属性所对应的值
阅读 7.3k
2 个回答

加上deep: true进行深度遍历
clipboard.png

clipboard.png

clipboard.png

1.watch整个对象的变化才是深度监听,如果要watch对象单个的属性变化,需要用computed中间件过度一下;
2.贴上代码:

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    computed:{
      secondChange(){
        return this.first.second
      }
    },
    watch:{
      secondChange(){
        console.log('second属性值变化了')
      }
    },

3.至于为什么computed作为中间件可以监听到单个属性变化?在vue中为什么可以通过computed属性作为中间件,去监听对象属性的变化
4.另外我专门写了一篇文章全面分析computed和watch:Vue的computed和watch的细节全面分析
5.可以一起讨论下

推荐问题