使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

使用Vue.js时，我们通常会遇到在组件渲染时需要动态新增响应式属性的情况。Vue提供了两种方式使对象属性(非响应式的)能被监听到，即Vue.$set()和Object.assign()。

使用Vue.$set()方法

Vue.$set()方法是Vue.js提供的Vue实例方法，用于响应式地向已有对象添加新的属性，或修改已有属性的值。这个方法的第一个参数是目标对象，第二个参数是新增或修改的属性名，第三个参数是属性值。

下面是一个具体的例子：

<template>
  <div>
    <h1>这是一个通过Vue.$set()方法新增响应式属性的例子</h1>
    <button @click="addData">添加数据</button>
    <ul>
      <li v-for="(item, idx) in data" :key="idx">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: []
    }
  },
  methods: {
    addData () {
      //向已有对象添加新属性（动态增加数组元素）
      this.$set(this.data, this.data.length, '新增数据 ' + (this.data.length + 1))
    }
  }
}
</script>

在上面的代码中，我们通过Vue.$set()方法将新增的属性转化为响应式属性，使其能被Vue实例监听以及重新渲染。

使用Object.assign()方法

Object.assign()是ES6新增的方法，该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。使用Object.assign()方法能够创建一个新对象，新对象通过赋值创建，然后使用Vue的data选项将其转换为响应式对象。

下面是一个具体的例子：

<template>
  <div>
    <h1>这是一个通过Object.assign()方法新增响应式属性的例子</h1>
    <button @click="addData">添加数据</button>
    <ul>
      <li v-for="(item, idx) in data" :key="idx">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: []
    }
  },
  methods: {
    addData () {
      //通过Object.assign()方法动态增加数组元素
      this.data = Object.assign([], this.data, ['新增数据 ' + (this.data.length + 1)])
    }
  }
}
</script>

在上面的代码中，我们通过Object.assign()方法为一个新对象赋值方式动态增加响应式数组元素使得它能被Vue实例监听以及重新渲染。

在使用Vue开发过程中，考虑到组件渲染时可能需要动态新增响应式属性的情况，在这种情况下可以使用Vue.$set()和Object.assign()方法，其区别在于Vue.$set()方法适用于向已有对象中动态添加响应式属性，Object.assign()方法适用于创建新对象并动态增加响应式属性。