网站建设中 html免费seo整站优化技术培训

Vue 3 的响应式系统与 Vue 2 有显著不同，Vue 3 使用了 Proxy 替代了 Vue 2 中的 Object.defineProperty，这使得 Vue 3 的响应式系统更加灵活和强大

---

Vue 3 响应式原理的核心

1. Proxy：

   • Vue 3 使用 Proxy 来拦截对象的操作（如读取、赋值、删除等）。
   • Proxy 可以监听整个对象，而不需要像 Object.defineProperty 那样递归遍历每个属性。

2. Reflect：

   • Reflect 是一个内置对象，提供了与 Proxy 拦截操作对应的方法。
   • Vue 3 使用 Reflect 来执行默认行为（如读取属性值、设置属性值等）。

3. 依赖收集与派发更新：

   • Vue 3 仍然使用依赖收集和派发更新的机制，但实现方式更加简洁。
   • 通过 effect 函数（类似于 Vue 2 的 watchEffect）来追踪依赖。

---

简单实现 Vue 3 响应式系统

以下是一个简化版的 Vue 3 响应式系统实现：

// 存储当前正在执行的 effect 函数
let activeEffect = null;// 依赖收集器
class Dep {constructor() {this.subscribers = new Set();}depend() {if (activeEffect) {this.subscribers.add(activeEffect);}}notify() {this.subscribers.forEach(effect => effect());}
}// 创建响应式对象
function reactive(obj) {return new Proxy(obj, {get(target, key, receiver) {const dep = getDep(target, key);dep.depend(); // 依赖收集return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {const dep = getDep(target, key);const result = Reflect.set(target, key, value, receiver);dep.notify(); // 派发更新return result;}});
}// 存储每个对象的每个 key 对应的 Dep 实例
const targetMap = new WeakMap();function getDep(target, key) {let depsMap = targetMap.get(target);if (!depsMap) {depsMap = new Map();targetMap.set(target, depsMap);}let dep = depsMap.get(key);if (!dep) {dep = new Dep();depsMap.set(key, dep);}return dep;
}// effect 函数，用于追踪依赖
function effect(fn) {activeEffect = fn;fn(); // 执行函数，触发 getter，收集依赖activeEffect = null;
}// 测试
const state = reactive({ count: 0, list: [1, 2, 3] });effect(() => {console.log('Count:', state.count);
});effect(() => {console.log('List:', state.list);
});state.count++; // 输出: Count: 1
state.list.push(4); // 输出: List: [1, 2, 3, 4]

---

代码解析

1. reactive 函数：

   • 使用 Proxy 包装对象，拦截 get 和 set 操作。
   • 在 get 中调用 dep.depend() 收集依赖。
   • 在 set 中调用 dep.notify() 派发更新。

2. Dep 类：

   • 用于存储依赖（effect 函数）。
   • 提供 depend 方法收集依赖，notify 方法派发更新。

3. effect 函数：

   • 类似于 Vue 2 的 watchEffect，用于执行副作用函数并追踪依赖。
   • 在执行过程中，activeEffect 会被设置为当前函数，从而在 get 中被收集。

4. targetMap 和 getDep：

   • targetMap 是一个 WeakMap，用于存储每个对象及其对应的 depsMap。
   • depsMap 是一个 Map，用于存储每个 key 对应的 Dep 实例。
   • getDep 函数用于获取或创建 Dep 实例。

---

Vue 3 的优势

1. 更好的性能：

   • Proxy 可以监听整个对象，而不需要递归遍历每个属性。
   • 只有在访问属性时才会创建 Dep，减少了初始化开销。

2. 更强大的功能：

   • Proxy 可以拦截更多操作，如 deleteProperty、has 等。
   • 支持数组的 push、pop 等操作，无需额外处理。

3. 更简洁的代码：

   • 依赖收集和派发更新的逻辑更加清晰和集中。

---

总结

Vue 3 的响应式系统基于 Proxy 和 Reflect，相比 Vue 2 的 Object.defineProperty，具有更好的性能和更强大的功能。通过 effect 函数追踪依赖，Dep 类管理依赖，Proxy 拦截操作，Vue 3 实现了一个高效且灵活的响应式系统。简化版的 Vue 3 的核心原理。