Vue中给对象新增属性的方法-步骤-使用Object.assign方法加新属性
Vue中给对象新增属性的方法
在Vue里,给对象加新属性有几种常见的方式,我来简单说说。使用Vue.set()方法
这个方法是最推荐的,因为它能保证新加的属性是响应式的,这样更新视图就方便多了。步骤:
- 在Vue组件里定义对象。
- 使用Vue.set()方法加新属性。
示例代码:
``` new Vue({ el: '#app', data: { myObject: {} }, methods: { addProperty() { this.$set(this.myObject, 'newProperty', 'newValue'); } } }); ```使用ES6的Object.assign()方法
这个方法用起来挺简单,但要注意,它加的属性不一定响应式。步骤:
- 在Vue组件里定义对象。
- 使用Object.assign()方法加新属性。
示例代码:
``` new Vue({ el: '#app', data: { myObject: {} }, methods: { addProperty() { Object.assign(this.myObject, { newProperty: 'newValue' }); } } }); ```直接赋值
直接赋值是最简单的方法,但缺点是属性不一定是响应式的,尤其在Vue2.x版本中。步骤:
- 在Vue组件里定义对象。
- 直接赋值加新属性。
示例代码:
``` new Vue({ el: '#app', data: { myObject: {} }, methods: { addProperty() { this.myObject.newProperty = 'newValue'; } } }); ```对比分析
下面我用个表格对比一下这三种方法。方法 | 优点 | 缺点 |
---|---|---|
Vue.set() | 新增属性是响应式的,能触发视图更新 | 需要引入Vue的全局API |
Object.assign() | 简单易用,可以同时添加多个属性 | 新增的属性不一定是响应式的,需要重新赋值 |
直接赋值 | 最简单的方法 | 新增的属性不一定是响应式的,特别是Vue2.x |