何为响应? 当我依赖你的时候, 你变我也变
当数据发生变化, 如果页面的某个地方
使用到了这个数据, 那么该页面的内容也会跟着发生变化
在 vue3 中 参考 Vue3 源码流程图
// 该函数的目的就是 更新页面
const componentUpdateFn = () => {
// ...
}
该函数的目的就是更新页面
也就是说, 当数据发生变化的时候, 就会运行 componentUpdateFn
这个函数
如何做到? 源码如下
const effect = new ReactiveEffect(
componentUpdateFn,
() => queueJob(instance.update),
instance.scope // track it in component's effect scope
)
将更改页面的函数, 也就是 componentUpdateFn, 放入到 ReactiveEffect
中
// 全局 effect 栈
const effectStack: ReactiveEffect[] = []
// 当前激活的 effect
let activeEffect: ReactiveEffect | undefined
class ReactiveEffect<T = any> {
active = true
deps: Dep[] = []
constructor(
public fn: () => T,
public scheduler: EffectScheduler | null = null,
scope?: EffectScope | null
) {
recordEffectScope(this, scope)
}
run() {
if