Vue中this.$set

### Vue 中 `this.$set` 的使用方法及场景

#### 方法定义与功能
`this.$set` 是 Vue 提供的一个全局 API，用于向响应式对象中添加一个新的属性，并确保该新属性也是响应式的，同时会触发视图更新[^3]。

#### 基本语法
基本语法如下所示：

vm.$set(target, propertyName/index, value)

其中：
- `target`: 要修改的目标对象或数组。
- `propertyName/index`: 对于对象而言是指要设置的新属性名；对于数组则是索引位置。
- `value`: 新属性对应的值。

#### 场景一：为已有对象动态增加新属性并保持其响应性
如果尝试直接在一个已经存在的响应式对象上添加新的属性，则这些新添加的属性不会被自动检测到成为响应式的部分。此时可以利用 `$set()` 来完成这项工作[^2]。

// 不推荐的方式 - 新增属性不具有响应性
data() {
    return {
        user: { name: 'John' }
    };
},
methods: {
    addAgeDirectly() {
        this.user.age = 30; // 这样做 age 属性不是响应性的
    }
}

正确做法应该是这样：

// 推荐方式 - 使用 $set 确保新增属性具备响应性
methods: {
    addAgeProperly() {
        this.$set(this.user, 'age', 30); // 正确的做法使 age 成为了响应式属性
    }
}

#### 场景二：更改数组中的某个元素
由于 JavaScript 数组的一些变更操作（如 push(), pop(), shift(), unshift(), splice(), sort(), reverse()）已经被 Vue 所拦截并进行了特殊处理以实现双向绑定的效果，但对于某些特定的操作（例如通过索引来直接赋值），仍然需要借助 `$set()` 函数来通知框架进行必要的 DOM 更新[^1]。

let items = ['a', 'b'];
items[1] = 'c'; // 非响应式变化
console.log(items);

// 应改为下面的形式以维持响应特性
this.$set(this.items, 1, 'd'); // 可见的变化将会反映在界面上