一、effect 函数的作用
Vue 的响应式系统是其核心特性之一,它使得开发者能够轻松地构建动态且响应迅速的用户界面。在这个系统中,effect 函数起到了至关重要的作用
effect 函数用于注册一个副作用函数(effect),这个函数会在依赖的响应式数据发生变化时自动重新执行,从而实现数据驱动的视图更新
(packages/reactivity/src/effect.ts):
effect 的主要作用是自动跟踪在 fn 函数中访问的所有响应式属性,并在这些属性发生变化时自动重新执行 fn
fn: 需要跟踪响应式更新的函数。它将在 effect 创建时立即执行一次,并且每当它依赖的响应式属性发生变化时,会再次执行
options: 控制 effect 行为的选项
scheduler: 允许自定义 effect 的调度策略
二、ReactiveEffectRunner 接口
effect 函数会返回一个运行器(runner)对象。通过 runner,你可以手动运行或重新运行 effect,即手动控制副作用执行或者获取 effect 实例
三、ReactiveEffect 类
ReactiveEffect 类它负责管理副作用的执行、依赖的跟踪,以及生命周期的控制
activeEffect: 这是一个全局变量,存储当前正在运行的 effect。通过这个变量,Vue 可以在执行 effect 函数时,正确地收集依赖关系
scheduler: 一个可选的调度函数,控制 effect 的执行时机
deps: 一个依赖数组,存储了 effect 所依赖的所有响应式数据。从另一个角度来说,每当这些依赖的数据发生变化时,effect 会被重新执行
run():是 effect 的核心执行逻辑。当 effect 运行时,它会设置相关的全局状态,以确保在执行 fn 时可以正确收集依赖
try...finally :保证在 fn 执行完后,无论结果如何,都会恢复之前的状态
四、其他
学习的记录,仅供参考