关于vue2的响应式$set响应式问题

41 阅读1分钟

相信大家都用过Vue2的$set方法,这是官方暴露出来的增加响应式数据的方法 例如:

   //在data中定义obj
   data() {
       return {
            obj: {}
       }
   }
   created() {
        //后续如果想在obj中添加属性并携带响应式就会这么写
        this.$set(obj, 'a', 100) // 这样就在obj中添加了一个a属性值为100并带有响应式
        obj.a = 100 // 这么写的话就会添加一个值为100的a属性但是不带有响应式
    }

但是你有没有遇到过使用set也无法增加响应式数据的情况?这有一种情况是使用set也无法增加响应式数据的情况? 这有一种情况是使用set也无法使数据带有响应式的情况

//依然在data中定义obj
    data() {
        return {
            obj: {}
        }
    }
    created() {
        this.$set(obj, 'a', 100) // 这样就在obj中添加了一个a属性值为100并带有响应式
        obj.b = 100 // 这么写的话就会添加一个值为100的b属性但是不带有响应式
        this.$set(obj, 'b', 1000) // 在obj已经有的属性中再使用$set添加属性此时添加的属性不会带有响应式
        //上述这种情况 obj对象的a属性是带有响应式的b属性是无响应式的
    }

遇到上述问题大概率是自己写法不规范造成的,只要编写代码的时候多注意下就不会出问题了。 问题大概率是$set的源码编写只对对象没有的属性添加响应式,有兴趣的话可以去看看这块源码