Vue中 this.$set的使用详解

在Vue中，我们通常使用data属性来存储组建的数据，同时也可以使用this关键字来访问这些数据。然而，当我们需要动态地添加或更新对象属性时，Vue的响应式系统并不会像我们期望的那样自动更新，而是需要使用this.$set方法。

什么是this.$set

在Vue中，当一个对象被添加到Vue实例的data属性里时，Vue会自动将其转换为响应式对象。Vue可以根据这些响应式对象来做出相应的视图更新。然而，当我们需要增加一个新的属性时，Vue并不会做出相应的更新操作。这时候，我们就需要使用Vue提供的$set方法。

this.$set方法的作用是将对象的某个属性设置为响应式的，这样当这个属性发生变化时，Vue会自动做出相应的视图更新。

格式如下：

Vue.set(obj, prop, value) 或者 this.$set(obj, prop, value)

其中，obj代表要设置属性的对象，prop代表要设置的属性名，value代表要设置的属性值。

示例说明

下面我们通过两个示例，详细讲解this.$set方法的使用。

示例一：添加新属性

假设我们有下面这样一个Vue组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="addNewProp">添加新属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    addNewProp() {
      this.$set(this, 'newProp', '这是一个新的属性')
    }
  }
}
</script>

当我们点击按钮时，会调用addNewProp方法，这个方法会使用this.$set方法添加一个名为newProp的新属性。由于Vue会自动将这个组件的data属性转换为响应式对象，当我们调用this.$set方法时，Vue会将newProp属性设置为响应式的，这样当newProp属性发生变化时，Vue会自动更新视图。

示例二：修改数组

假设我们有下面这样一个Vue组件：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{item}}</li>
    <button @click="changeList">改变数组</button>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    changeList() {
      this.list[1] = 'pear'
      this.$set(this.list, 2, 'grape')
    }
  }
}
</script>

当我们点击按钮时，会调用changeList方法，这个方法会使用this.$set方法修改数组中的第二个和第三个元素。由于Vue会自动将这个组件的data属性转换为响应式对象，当我们调用this.$set方法时，Vue会将这两个元素设置为响应式的，这样当它们发生变化时，Vue会自动更新视图。

总结

$this.$set是一种非常实用的属性设置方式，在Vue开发中非常常见，可以用来解决一些关键的响应式变量更新问题，让Vue代码更加简洁明了。