vue中深度监听对象的几种方式（watch）

最新推荐文章于 2025-03-27 23:33:13 发布

lanzhengdanrui

最新推荐文章于 2025-03-27 23:33:13 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_44068394/article/details/103817264

版权

前端专栏收录该内容

27 篇文章

订阅专栏

本文深入探讨Vue中如何使用watch进行深度监听，包括直接监听对象、监听对象的特定属性及利用computed属性结合watch实现深度监听的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

直接监听对象

watch:{
  obj:{ //监听的对象
    deep:true, //深度监听设置为 true
    handler:function(newV,oldV){
      console.log('watch中：',newV)
    }
  }
}

监听对象下的其中一个属性

data () {
      return {
        obj:{
          name:'老蒋坏得很',
          age:18
        }
      }
    },
    watch:{
      'obj.name':{
        deep:true,
        handler:function(newV,oldV){
          console.log('watch中：',newV)
        }
      }
    }

computed配合watch实现单个属性的深度监听

data () {
      return {
        obj:{
          name:'老蒋坏得很',
          age:18
        }
      }
    },
    computed:{
      name(){
        return this.obj.name;
      }
    },
    watch:{
      name(newval，oldval){
        console.log('新：',newval);
        console.log('旧：',oldval)
      }
    }