vue watch深度监控一个对象下新增属性不生效问题

世界呀上我请温柔

于 2020-10-12 11:31:48 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：项目问题

本文链接：https://blog.youkuaiyun.com/qq_40106513/article/details/109024274

项目问题专栏收录该内容

5 篇文章

订阅专栏

本文通过一个具体的项目案例介绍了在Vue.js框架中如何处理非响应式属性赋值导致的问题，特别是针对初次创建对象属性时使用不同方法对监听效果的影响。

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

先简单还原下项目中遇到的问题：

adc为一个空对象，watch深度监听abc下的pageNum属性（此时还没有）。

data() {
    return {
      abc: {
        
      }
    }
},
watch:{
    'abc': {
      deep:true,
      immediate:true,
      handler(newV){
        this.pageNum = newV.pageNum
      }
    }
  },

我们都知道若直接使用下面1的方式不是响应式的，也就无法监听，改为方式2可监听。

1,

this.abc.pageNum = 1

2,

this.$set(this.abc,'pageNum',1)

这里重点要讲的是：

1，若写完方式1后再执行方式2也是无法达到响应式的，自然也无法监听。

2，若写完方式1后再 this.abc={} 情况后再执行方式2也是可以的。

实际项目中没人会这么傻瓜的写，我也是在改同事代码的时候遇到这种问题，实际情况为在俩个组件中都改变pageNum的值，一个为方式1，另一个为方式2，方式1的组件有俩个方法还有其中一个方法有this.abc={},这骚操作，这就导致页面展示时bug很是怪异！