各位观众老爷，晚上好！
今天咱们聊聊 Vue 2 源码里那些响应式属性的“爱恨情仇”，尤其是关于增删它们的一些限制，以及 Vue.set 和 Vue.delete 这两个“老朋友”的幕后故事。放心，我会尽量用大白话，争取让大家听得懂，记得住。
一、响应式世界的“潜规则”：为何要有增删限制？
首先，我们要明白 Vue 2 的响应式系统，是基于 Object.defineProperty 来的。简单来说，就是给对象的每个属性都加上 getter 和 setter。当属性被读取时，getter 会收集依赖（也就是用到这个属性的组件）；当属性被修改时，setter 会通知这些依赖进行更新。
但是！Object.defineProperty 只能劫持已经存在的属性。也就是说，如果你动态地给对象添加一个属性，或者删除一个属性，Vue 是不知道的，也就没法触发响应式更新了。
这就好比，你给一个房子装了监控系统（Object.defineProperty），监控着每个房间（属性）。但是，后来你又偷偷加盖了一个房间，或者拆掉了一个房间，监控系统就懵逼了，完全不知道发生了什么。
所以，Vue 2 的官方文档才反复强调，避免在 data 中动态添加或删除属性。
二、Vue.set：响应式“开后门”的英雄
既然直接添加或删除属性不行，那怎么办呢？Vue.set 就闪亮登场了。它的作用，就是绕过 Vue 的限制，以一种“正确”的方式添加属性，并且确保这个新属性也是响应式的。
Vue.set 的用法：
Vue.set(object, key, value)
// 或者
this.$set(object, key, value) // 在 Vue 组件实例中Vue.set 的源码剖析：
Vue.set 的实现稍微复杂一点，因为它要考虑到各种情况，比如目标对象是不是数组，是不是 Vue 实例等等。我们简化一下，只看最核心的部分：
function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key);
target.splice(key, 1, val); // 数组用 splice 触发响应式
return val;
}
if (key in target && !(key in Object.prototype)) {
target[key] = val; // 如果 key 已经存在，直接赋值
return val;
}
const ob = (target).__ob__; // 拿到 Observer 实例
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
);
return val;
}
if (!ob) {
target[key] = val; // 如果 target 不是响应式的，直接赋值
return val;
}
defineReactive(ob.value, key, val); // 关键：重新定义响应式属性
ob.dep.notify(); // 触发更新
return val;
}源码解读：
-
处理数组： 如果目标是数组，
Vue.set会使用splice方法来插入新元素。splice是 JavaScript 原生的数组方法，Vue 已经对其进行了增强，可以触发数组的响应式更新。 -
处理已存在的属性： 如果属性已经存在于目标对象中，那么直接赋值就可以了。因为这个属性已经是响应式的了。
-
处理 Vue 实例： 如果目标是 Vue 实例，或者 Vue 实例的根 data，那么会发出警告，建议在 data 选项中提前声明属性。虽然
Vue.set也可以在这种情况下工作，但是为了性能和可维护性，最好还是避免这样做。 -
处理非响应式对象： 如果目标不是响应式的对象，那么直接赋值就可以了。
-
核心逻辑：
defineReactive+notify： 这才是Vue.set的灵魂所在。ob = (target).__ob__：每个响应式对象都有一个__ob__属性，指向它的 Observer 实例。Observer 负责监听对象的属性变化。defineReactive(ob.value, key, val)：这个函数就是用来定义响应式属性的。它会给target[key]加上getter和setter。ob.dep.notify()：ob.dep是 Observer 实例的依赖收集器。调用notify方法会通知所有依赖这个对象的组件进行更新。
总结：
Vue.set 的本质，就是绕过了 Vue 的响应式限制，手动地给对象添加响应式属性，并触发更新。
三、Vue.delete：响应式“清除器”
和 Vue.set 类似，Vue.delete 的作用是删除对象的属性，并且确保这个删除操作也能触发响应式更新。
Vue.delete 的用法：
Vue.delete(object, key)
// 或者
this.$delete(object, key) // 在 Vue 组件实例中Vue.delete 的源码剖析：
function del(target, key) {
if (Array.isArray(target)) {
target.splice(key, 1); // 数组用 splice 触发响应式
return
}
const ob = (target).__ob__;
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid deleting properties on a Vue instance or its root $data ' +
'- just set it to null.'
);
return
}
if (!hasOwn(target, key)) {
return
}
delete target[key]; // 删除属性
if (!ob) {
return
}
ob.dep.notify(); // 触发更新
}
function hasOwn(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key)
}源码解读：
-
处理数组： 同样，如果目标是数组，
Vue.delete会使用splice方法来删除元素。 -
处理 Vue 实例： 同样，如果目标是 Vue 实例，或者 Vue 实例的根 data，那么会发出警告，建议将属性设置为
null。 -
处理不存在的属性： 如果要删除的属性不存在，直接返回。
-
核心逻辑：
delete+notify：delete target[key]：直接使用delete操作符删除属性。ob.dep.notify()：触发更新，通知所有依赖这个对象的组件进行更新。
总结：
Vue.delete 的本质，就是绕过了 Vue 的响应式限制，手动地删除对象的属性，并触发更新。
四、$set 和 $delete：组件内部的“特权”
在 Vue 组件内部，我们可以使用 $set 和 $delete 方法，它们实际上就是 Vue.set 和 Vue.delete 的别名。这样做的好处是，我们可以直接在模板中使用这些方法，而不需要导入 Vue 对象。
例如：
<template>
<div>
<p v-for="(item, index) in list" :key="index">{{ item }}</p>
<button @click="addItem">Add Item</button>
<button @click="removeItem(0)">Remove Item</button>
</div>
</template>
<script>
export default {
data() {
return {
list: ['A', 'B', 'C']
};
},
methods: {
addItem() {
this.$set(this.list, this.list.length, 'D'); // 添加新元素
},
removeItem(index) {
this.$delete(this.list, index); // 删除元素
}
}
};
</script>五、使用场景和注意事项
虽然 Vue.set 和 Vue.delete 很强大，但是我们也要谨慎使用。一般来说，只有在以下情况下才需要使用它们：
- 初始化时无法预知的属性： 如果我们无法在 data 选项中提前声明属性，那么可以使用
Vue.set来动态添加属性。 - 需要删除属性的情况： 有时候，我们需要删除对象的某个属性，可以使用
Vue.delete。
注意事项：
- 尽量避免在 Vue 实例或其根 data 上使用
Vue.set和Vue.delete。 这可能会导致性能问题，并且难以维护。 - 对于数组，尽量使用
push、pop、shift、unshift、splice、sort、reverse这些变异方法。 这些方法已经被 Vue 增强，可以触发响应式更新。 - 如果你需要给对象添加多个属性，最好一次性添加，而不是多次调用
Vue.set。 这可以提高性能。
六、为什么 Vue 3 不需要 Vue.set 和 Vue.delete 了？
这是个好问题！因为 Vue 3 使用了 Proxy 来代替 Object.defineProperty。Proxy 可以劫持对象的所有操作，包括属性的添加和删除。也就是说，Vue 3 可以自动地监听对象的变化，而不需要我们手动地调用 Vue.set 和 Vue.delete 了。
七、总结
| 功能 | Vue 2 (Object.defineProperty) | Vue 3 (Proxy) |
|---|---|---|
| 添加属性 | 需要 Vue.set 或 $set，否则无法触发响应式更新 |
无需特殊处理，直接添加即可 |
| 删除属性 | 需要 Vue.delete 或 $delete，否则无法触发响应式更新 |
无需特殊处理，直接删除即可 |
| 适用场景 | 动态添加/删除属性，确保响应式更新 | 无需特殊处理，所有属性变更都能自动触发响应式更新 |
| 性能影响 | Vue.set 和 Vue.delete 会增加一些性能开销 |
Proxy 的性能开销相对较小，且 Vue 3 做了优化 |
| 限制 | 无法劫持数组的索引和长度变更 (部分通过 hack 解决) | 可以劫持所有操作 |
| 使用方式 | Vue.set(obj, 'newProp', value) 或 this.$set(obj, 'newProp', value) |
obj.newProp = value |
| 依赖性 | 依赖 Vue 对象或组件实例 | 无需依赖，直接操作对象即可 |
总而言之，Vue.set 和 Vue.delete 是 Vue 2 为了解决响应式限制而提供的两个工具。虽然它们很有用，但是我们也要尽量避免滥用。在 Vue 3 中，由于使用了 Proxy，这些限制已经不存在了。
好了，今天的讲座就到这里。希望大家有所收获！记住，理解原理比死记硬背 API 更重要。下次再见！