vm.$set 是 Vue.js 提供的一个方法，用于在 Vue 实例中动态添加响应式属性。它的主要作用是确保新添加的属性能够被 Vue 的响应式系统监测到，从而触发视图的更新。
使用示例
假设我们有一个 Vue 实例
var vm = new Vue({
data: {
user: {
name: 'Alice'
}
}
});我们希望在 user 对象中添加一个新的属性 age。直接添加不会触发视图更新
vm.user.age = 25; // 直接添加不会触发视图更新为了确保新添加的属性是响应式的，可以使用 vm.$set
vm.$set(vm.user, 'age', 25);原理
Vue 的响应式系统是基于 Object.defineProperty 实现的。当一个对象被添加到 Vue 实例的 data 中时，Vue 会递归地遍历该对象的所有属性，并使用 Object.defineProperty 将这些属性转换为 getter 和 setter，从而实现响应式。然而，直接添加的新属性并没有通过这种方式定义，因此 Vue 无法检测到这些新属性的变化。vm.$set 方法内部使用了 Vue 的 set 方法，它会确保新添加的属性也能通过 Object.defineProperty 转换为响应式属性。
vm.$set 的实现
Vue 源码中 set 方法的实现（Vue 2.x）大致如下：
function set(target, key, val) {
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key);
target.splice(key, 1, val);
return val;
}
if (key in target && !(key in Object.prototype)) {
target[key] = val;
return val;
}
const ob = target.__ob__;
if (!ob) {
target[key] = val;
return val;
}
defineReactive(ob.value, key, val);
ob.dep.notify();
return val;
}
function defineReactive(obj, key, val) {
const dep = new Dep();
let childOb = observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
const value = val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
}
}
return value;
},
set: function reactiveSetter(newVal) {
const value = val;
if (newVal === value || (newVal !== newVal && value !== value)) {
return;
}
val = newVal;
childOb = observe(newVal);
dep.notify();
}
});
}总结
vm.$set 方法在 Vue 中用于动态添加响应式属性，确保新属性能够被 Vue 的响应式系统监测到。它通过 Object.defineProperty 将新属性定义为响应式属性，并触发依赖更新，确保视图能够正确更新。
使用工具学会使用只是第一步，掌握原理并能够通过原理解决问题才是关键，在平时的开发中，使用时多数，然而在遇到复杂问题或者优化时候掌握原理会提高开发效率。
