this.$set() 的用法详解（Vue响应式系统相关）

1. 什么是 this.$set()？

this.$set(target, key, value) 是 Vue 2 中提供的一个方法，用于向响应式对象中动态添加属性，确保新加的属性同样是响应式的。 

2. 为什么需要它？

Vue 2 的响应式系统基于 Object.defineProperty，它只能检测到对象已有属性的变化，无法检测新增的属性。 

data() {return {user: {}}
},
methods: {addProp() {this.user.name = 'fang'; // 直接赋值不会触发视图更新}
}

 这样写，不会触发视图更新，因为 user 对象一开始没有 name 属性。

3. 正确用法：
 

this.$set(this.user, 'name', 'fang');

 4. 具体示例：

export default {data() {return {info: {}}},methods: {addInfo() {this.$set(this.info, 'age', 30);// 或者Vue.set(this.info, 'age', 30); // 组件外用Vue全局对象调用}}
}

5. Vue 3 情况

Vue 3 使用 Proxy 实现响应式，天然支持新增属性的响应式，不需要 $set。