vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法。但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题。
在Vue中,给data中的对象添加一个新属性时,Vue默认不会检测到这个属性的添加,因此,不会触发视图的更新。为了解决这个问题,也就是说怎么才能添加响应式的属性呢?Vue提供了几种方法来添加响应式属性:
1、在vue中可以使用 this.$set(对象名,'属性名',属性值) 的方法去给对象添加属性,或者使用Vue.set(对象名,'属性名',属性值) 的方法进行添加,添加之后的属性就带有响应式了。
- 使用Vue.set()
方法:
Vue.set(vm.someObject, 'newProp', 'value');
通过Vue.set
向响应式对象中添加一个property
,并确保这个新 property
同样是响应式的,且触发视图更新。
- 使用对象的$set()
方法(