当前位置：首页 > news >正文

网站开发文档docwordpress文章和页面

news 2025/11/15 10:50:37

网站开发文档doc,wordpress文章和页面,便民网站开发,前端网站开发流程目录核心概念响应式效果的实现依赖收集的具体流程为什么使用全局变量？ 嵌套 effect 的处理总结 Vue3 的响应式系统核心在于跟踪依赖并在数据变化时触发更新。effect.ts文件实现了这一机制的核心部分，下面我们来梳理其中的关键思路。核心概念…

核心概念

响应式效果的实现

依赖收集的具体流程

为什么使用全局变量？

嵌套 effect 的处理

总结

Vue3 的响应式系统核心在于跟踪依赖并在数据变化时触发更新。effect.ts文件实现了这一机制的核心部分，下面我们来梳理其中的关键思路。

核心概念

// 创建一个响应式对象 effect
export function effect(fn, options: any = {}) {// 创建一个 effect 只要依赖的属性变化，就会重新执行const _effect = new ReactiveEffect(fn, () => {_effect.run();});// 执行_effect.run();
}export let activeEffect; // 当前的 effect

响应式效果的实现

ReactiveEffect

类是整个响应式系统的核心，它负责：

存储用户传入的回调函数
提供执行机制
处理嵌套 effect 的情况

class ReactiveEffect {/*** fn 是用户传入的回调函数「如果fn中依赖了响应式数据，当数据变化后，会重新调用scheduler -->run」* scheduler 是调度器*/public active = true; //默认是响应式的constructor(public fn, public scheduler) {}run() {// 如果当前状态是停止的，执行后，啥都不做if (!this.active) {return this.fn();}/***     effect(() => {console.log(state.name);effect(() => {console.log(state.name);})console.log(state.age);})执行前，保存当前的 activeEffect 可以理解为 「栈」执行完后，恢复上一次的 activeEffect*/let lastEffect = activeEffect;try {activeEffect = this; // 当前的 effect 「依赖收集」return this.fn(); //依赖收集 「state.name ,state.age」} finally {activeEffect = lastEffect; // 执行完毕后 恢复上一次的 activeEffect}}
}

activeEffect 是一个全局变量，它的核心作用是：标记当前正在执行的 effect。这是依赖收集的关键环节，让系统知道"当前访问的属性应该与哪个 effect 建立联系"

依赖收集的具体流程

让我们通过一个具体的例子来理解这个过程：

const state = reactive({ name: 'zhang', age: 18 });effect(() => {console.log(state.name); // 访问 name 属性
});

当这段代码执行时，发生了以下步骤：

调用 effect 函数，创建一个 ReactiveEffect 实例
调用 _effect.run()
在 run 方法中，将 activeEffect 设置为当前 effect 实例
执行用户传入的回调函数 fn()
在回调函数中访问 state.name
访问属性触发 Proxy 的 get 捕获器
get 捕获器调用 track 函数

get(target: any, key: any, receiver: any) {// ...track(target, key);return Reflect.get(target, key, receiver);
}

track 函数检查 activeEffect 是否存在，如果存在，就建立依赖关系

export function track(target, key) {if (activeEffect) {console.log(activeEffect, key);// 这里应该建立 target[key] 和 activeEffect 的映射关系}
}

为什么使用全局变量？

使用全局变量activeEffect的好处是：

简化 API 设计，用户不需要手动指定依赖关系
自动追踪运行时的依赖，只收集真正访问的属性
支持动态依赖收集，依赖可以根据条件变化

嵌套 effect 的处理

Vue3 巧妙地处理了嵌套 effect 的情况，通过维护当前活跃的 effect 和保存上一个 effect 的方式：

effect(() => {console.log(state.name);  // 外层 effect 依赖 state.nameeffect(() => {console.log(state.name);  // 内层 effect 依赖 state.name})console.log(state.age);  // 外层 effect 还依赖 state.age
})

当处理嵌套 effect 时，代码会：