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 |