各位观众，晚上好！欢迎来到今天的“扒光Vue”系列讲座。今晚咱们要扒的是Vue的骨骼和肌肉——响应式系统，重点对比Vue 2时代的defineProperty和Vue 3时代的Proxy。
（清清嗓子）
好，废话不多说，直接上干货！
Part 1: 响应式系统是啥玩意儿？
响应式系统，说白了，就是让你的数据变化能自动驱动视图更新。比如，你在输入框里输入文字，页面上的展示内容也跟着变，这就是响应式在起作用。Vue的核心竞争力之一，就是它提供了一套简单又强大的响应式系统。
Part 2: Vue 2：defineProperty的爱恨情仇
在Vue 2中，响应式是通过Object.defineProperty实现的。这玩意儿能让你拦截对象属性的读取（get）和设置（set）操作，从而在数据变化时通知相关的依赖（比如组件的渲染函数）。
先看个简单的例子：
function defineReactive(obj, key, val) {
// 如果val本身也是一个对象，需要递归处理，让其内部的属性也是响应式的
if (typeof val === 'object' && val !== null) {
observe(val);
}
Object.defineProperty(obj, key, {
enumerable: true, // 可枚举
configurable: true, // 可配置
get: function reactiveGetter() {
console.log(`Getting key "${key}": ${val}`);
// 在这里收集依赖，当数据变化时通知这些依赖
return val;
},
set: function reactiveSetter(newVal) {
if (newVal === val) return; // 如果新值和旧值一样，就不用更新了
console.log(`Setting key "${key}" to: ${newVal}`);
val = newVal;
// 在这里通知依赖更新
// 如果newVal本身也是一个对象，需要递归处理，让其内部的属性也是响应式的
if (typeof newVal === 'object' && newVal !== null) {
observe(newVal);
}
}
});
}
function observe(obj) {
if (typeof obj !== 'object' || obj === null) {
return; // 只处理对象
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key]);
});
}
const data = {
name: 'Vue',
age: 3
};
observe(data);
console.log(data.name); // Getting key "name": Vue Vue
data.name = 'Vue.js'; // Setting key "name" to: Vue.js
console.log(data.name); // Getting key "name": Vue.js Vue.js
data.info = {grade: 5}; //无法检测新增属性
data.info.grade = 6; //无法检测属性修改这段代码简单模拟了defineProperty的工作方式。defineReactive函数接收一个对象、一个键和一个值，然后使用Object.defineProperty为这个键定义getter和setter。在getter中，我们可以收集依赖；在setter中，我们可以通知依赖更新。observe函数则递归遍历对象的所有属性，将它们变成响应式的。
defineProperty的优点：
- 兼容性好：
defineProperty在ES5时代就已经存在，兼容性非常棒，几乎所有浏览器都支持。 - 实现简单： 相对来说，
defineProperty的实现逻辑比较简单，容易理解和维护。
defineProperty的缺点：
- 只能监听现有属性：
defineProperty只能监听对象上已经存在的属性，对于新增属性或删除属性，它就无能为力了。这就是为什么在Vue 2中，你需要使用Vue.set或this.$set来添加响应式属性。 - 无法监听数组的变化：
defineProperty无法直接监听数组的变化，Vue 2是通过重写数组的某些方法（如push、pop、splice等）来实现数组的响应式。这是一种hacky的方式，不够优雅。 - 性能问题： 对于深层嵌套的对象，需要递归地使用
defineProperty，这会带来一定的性能开销。
为了更直观地了解defineProperty的优缺点，咱们来个表格：
| 特性 | 优点 | 缺点 |
|---|---|---|
| 兼容性 | 兼容性好（ES5） | 无 |
| 监听范围 | 只能监听现有属性 | 无法监听新增/删除属性，无法直接监听数组 |
| 实现复杂度 | 简单 | 需要hacky的方式处理数组 |
| 性能 | 递归处理深层对象有性能开销 | |
| 代码可维护性 | 相对较好 | 数组的hack导致代码可读性下降 |
Part 3: Vue 3：Proxy的强势登场
Vue 3拥抱了ES6的Proxy，这玩意儿简直是响应式系统的救星！Proxy可以直接监听整个对象，而不仅仅是对象的属性。这意味着，无论你新增、删除属性，还是直接修改数组，Proxy都能感知到。
再来个例子：
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
const proxy = new Proxy(target, {
get(target, key, receiver) {
console.log(`Getting key "${key}": ${target[key]}`);
// 在这里收集依赖
return Reflect.get(target, key, receiver); // 使用Reflect保证this指向
},
set(target, key, value, receiver) {
if (value === target[key]) {
return true; // 如果新值和旧值一样，就不用更新了
}
console.log(`Setting key "${key}" to: ${value}`);
target[key] = value;
// 在这里通知依赖更新
return Reflect.set(target, key, value, receiver); // 使用Reflect保证this指向
},
deleteProperty(target, key) {
console.log(`Deleting key "${key}"`);
delete target[key];
// 在这里通知依赖更新
return true;
}
});
return proxy;
}
const data = reactive({
name: 'Vue',
age: 3
});
console.log(data.name); // Getting key "name": Vue Vue
data.name = 'Vue.js'; // Setting key "name" to: Vue.js
console.log(data.name); // Getting key "name": Vue.js Vue.js
data.info = {grade: 5}; // 可以检测新增属性
data.info.grade = 6; // 可以检测属性修改
delete data.age; //Deleting key "age"
console.log(data);这段代码使用Proxy创建了一个响应式对象。Proxy接收两个参数：目标对象和一个处理对象（handler）。处理对象定义了各种拦截操作，比如get、set、deleteProperty等。当对目标对象进行这些操作时，就会触发处理对象中相应的函数。
Proxy的优点：
- 可以监听整个对象：
Proxy可以直接监听整个对象，包括新增、删除属性。 - 可以监听数组的变化：
Proxy可以监听数组的变化，无需hacky的方式。 - 性能更好：
Proxy采用的是懒代理模式，只有在真正访问属性时才会进行拦截，避免了不必要的性能开销。
Proxy的缺点：
- 兼容性较差：
Proxy是ES6的新特性，在一些老版本浏览器中不支持。 - 无法polyfill：
Proxy无法通过polyfill来模拟，这意味着，如果你需要支持老版本浏览器，就无法使用Proxy。
同样，咱们也用表格来总结一下Proxy的优缺点：
| 特性 | 优点 | 缺点 |
|---|---|---|
| 兼容性 | 无 | 兼容性较差（ES6），无法polyfill |
| 监听范围 | 可以监听整个对象，包括新增/删除属性，可以监听数组 | 无 |
| 实现复杂度 | 相对简单 | 无 |
| 性能 | 懒代理，性能更好 | |
| 代码可维护性 | 更好，无需hacky的方式处理数组 |
Part 4: 性能对比：defineProperty vs Proxy
说到性能，这可是个敏感话题。理论上，Proxy的懒代理模式应该比defineProperty更高效。但实际情况要复杂一些，因为性能受到多种因素的影响，比如数据结构的复杂程度、依赖的数量、浏览器的优化等等。
一般来说，对于小型、简单的数据对象，defineProperty和Proxy的性能差异可能不太明显。但对于大型、复杂的数据对象，Proxy的优势就会显现出来。
一个不严谨的结论:
- 小型对象： 差异不大，甚至在某些情况下，
defineProperty可能会略胜一筹（因为Proxy的创建本身也需要一定的开销）。 - 大型对象：
Proxy通常更胜一筹，因为它的懒代理模式可以避免不必要的拦截操作。
Part 5: 总结：选择哪个？
那么，在实际开发中，我们应该选择defineProperty还是Proxy呢？
- 如果你需要支持老版本浏览器，那么只能选择
defineProperty。 - 如果你的项目对性能要求很高，并且可以放弃对老版本浏览器的支持，那么
Proxy是更好的选择。 - 如果你的项目比较简单，数据结构也不复杂，那么
defineProperty和Proxy都可以选择。
补充：Vue 3 的优化策略
虽然 Vue 3 默认使用 Proxy，但它并没有完全放弃 defineProperty。Vue 3 采用了一种混合的策略：
- 对于简单的、非响应式的属性，Vue 3 仍然会使用
defineProperty。 - 只有当属性需要变成响应式时，Vue 3 才会使用
Proxy。
这种混合策略可以在一定程度上提高性能，并减少内存占用。
最后，给大家留个思考题：
Vue 3 的 Proxy 响应式系统是如何实现依赖收集和依赖更新的？ 提示：可以了解一下 effect 函数和 track/trigger 机制。
好了，今天的讲座就到这里。感谢大家的观看！希望今天的分享能让你对Vue的响应式系统有更深入的理解。咱们下期再见！
（鞠躬）