vue2中this.$set如何使用，举例说明

在Vue 2中，this.$set方法用于在响应式对象中添加新的属性或修改已有属性，并确保这些属性也是响应式的。这个方法接受三个参数：对象、属性名和属性值。

下面是一个使用this.$set方法的示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      // 使用this.$set方法在响应式对象中添加新属性或修改已有属性
      this.$set(this, 'message', 'Hello, Vue 2!');
    }
  }
};
</script>

在上面的示例中，我们使用this.$set方法将data中的message属性修改为'Hello, Vue 2!'。这样做可以确保message属性的变化能够被Vue追踪和响应。

需要注意的是，this.$set方法只能用于Vue实例的响应式数据对象上。如果要在非响应式对象上添加属性，可以直接使用普通的JavaScript语法来添加。