相信大家都用过Vue2的$set方法,这是官方暴露出来的增加响应式数据的方法 例如:
//在data中定义obj
data() {
return {
obj: {}
}
}
created() {
//后续如果想在obj中添加属性并携带响应式就会这么写
this.$set(obj, 'a', 100) // 这样就在obj中添加了一个a属性值为100并带有响应式
obj.a = 100 // 这么写的话就会添加一个值为100的a属性但是不带有响应式
}
但是你有没有遇到过使用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的源码编写只对对象没有的属性添加响应式,有兴趣的话可以去看看这块源码