致敬Vue3: 1.1万字从零解读Vue3.0源码响应式系统

最新推荐文章于 2024-07-19 15:37:38 发布

Peter 谭

最新推荐文章于 2024-07-19 15:37:38 发布

阅读量497

点赞数 2

文章标签： java proxy hash gwt ceph

本文链接：https://blog.csdn.net/petertanjinjie/article/details/108744719

版权

本文详细解读Vue3响应式系统的核心——effect，从effect的参数、属性到其工作原理，包括Proxy如何实现数据劫持，以及reactive、ref、computed等特性的实现。通过对Vue3中数据响应、依赖收集和触发机制的剖析，揭示了Vue3在数据处理上的优化和改进。

摘要由CSDN通过智能技术生成

原文地址:https://hkc452.github.io/slamdunk-the-vue3/

作者:KC

effect 是响应式系统的核心，而响应式系统又是 vue3 中的核心，所以从 effect 开始讲起。

首先看下面 effect 的传参，fn 是回调函数，options 是传入的参数。

export function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

其中 option 的参数如下，都是属于可选的。

参数 & 含义

lazy 是否延迟触发 effect
computed 是否为计算属性
scheduler 调度函数
onTrack 追踪时触发
onTrigger 触发回调时触发
onStop 停止监听时触发

export interface ReactiveEffectOptions {
  lazy?: boolean
  computed?: boolean
  scheduler?: (job: ReactiveEffect) => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  onStop?: () => void
}

分析完参数之后，继续我们一开始的分析。当我们调用 effect 时，首先判断传入的 fn 是否是 effect，如果是，取出原始值，然后调用 createReactiveEffect 创建新的effect，如果传入的 option 中的 lazy 不为为 true，则立即调用我们刚刚创建的 effect, 最后返回刚刚创建的 effect。
那么createReactiveEffect是怎样是创建 effect的呢？

function createReactiveEffect<T = any>(
  fn: (...args: any[]) => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(...args: unknown[]): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn(...args)
    }
    if (!effectStack.includes(effect)) {
      cleanup(effect)
      try {
        enableTracking()
        effectStack.push(effect)
        activeEffect = effect
        return fn(...args)
      } finally {
        effectStack.pop()
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = []
  effect.options = options
  return effect
}

我们先忽略 reactiveEffect，继续看下面的挂载的属性。

effect 挂载属性含义

id 自增id，唯一标识effect
_isEffect 用于标识方法是否是effect
active effect 是否激活
raw 创建effect是传入的fn
deps 持有当前 effect 的dep 数组
options 创建effect是传入的options
回到 reactiveEffect，如果 effect 不是激活状态，这种情况发生在我们调用了 effect 中的 stop 方法之后，那么先前没有传入调用 scheduler 函数的话，直接调用原始方法fn，否则直接返回。
那么处于激活状态的 effect 要怎么进行处理呢？首先判断是否当前 effect 是否在 effectStack 当中，如果在，则不进行调用，这个主要是为了避免死循环。拿下面测试用例来看

it('should avoid infinite loops with other effects', () => {
    const nums = reactive({ num1: 0, num2: 1 })

    const spy1 = jest.fn(() => (nums.num1 = nums.num2))
    const spy2 = jest.fn(() => (nums.num2 = nums.num1))
    effect(spy1)
    effect(spy2)
    expect(nums.num1).toBe(1)
    expect(nums.num2).toBe(1)
    expect(spy1).toHaveBeenCalledTimes(1)
    expect(spy2).toHaveBeenCalledTimes(1)
    nums.num2 = 4
    expect(nums.num1).toBe(4)
    expect(nums.num2).toBe(4)
    expect(spy1).toHaveBeenCalledTimes(2)
    expect(spy2).toHaveBeenCalledTimes(2)
    nums.num1 = 10
    expect(nums.num1).toBe(10)
    expect(nums.num2).toBe(10)
    expect(spy1).toHaveBeenCalledTimes(3)
    expect(spy2).toHaveBeenCalledTimes(3)
})

如果不加 effectStack，会导致 num2 改变，触发了 spy1, spy1 里面 num1 改变又触发了 spy2, spy2 又会改变 num2，从而触发了死循环。
接着是清除依赖，每次 effect 运行都会重新收集依赖, deps 是持有 effect 的依赖数组，其中里面的每个 dep 是对应对象某个 key 的全部依赖，我们在这里需要做的就是首先把 effect 从 dep 中删除，最后把 deps 数组清空。

function cleanup(effect: ReactiveEffect) {
  const { deps } = effect
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect)
    }
    deps.length = 0
  }
}

清除完依赖，就开始重新收集依赖。首先开启依赖收集，把当前 effect 放入 effectStack 中，然后讲 activeEffect 设置为当前的 effect，activeEffect 主要为了在收集依赖的时候使用（在下面会很快讲到），然后调用 fn 并且返回值，当这一切完成的时候，finally 阶段，会把当前 effect 弹出，恢复原来的收集依赖的状态，还有恢复原来的 activeEffect。

 try {
    enableTracking()
    effectStack.push(effect)
    activeEffect = effect
    return fn(...args)
  } finally {
    effectStack.pop()
    resetTracking()
    activeEffect = effectStack[effectStack.length - 1]
  }

那 effect 是怎么收集依赖的呢？vue3 利用 proxy 劫持对象，在上面运行 effect 中读取对象的时候，当前对象的 key 的依赖 set集合会把 effect 收集进去。

export function track(target: object, type: TrackOpTypes, key: unknown) {
  ...
}

vue3 在 reactive 中触发 track 函数，reactive 会在单独的章节讲。触发 track 的参数中，object 表示触发 track 的对象， type 代表触发 track 类型，而 key 则是触发 track 的 object 的 key。在下面可以看到三种类型的读取对象会触发 track，分别是 get、 has、 iterate。

export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}

回到 track 内部，如果 shouldTrack 为 false 或者 activeEffect 为空，则不进行依赖收集。接着 targetMap 里面有没有该对象，没有新建 map，然后再看这个 map 有没有这个对象的对应 key 的依赖 set 集合，没有则新建一个。如果对象对应的 key 的依赖 set 集合也没有当前 activeEffect，则把 activeEffect 加到 set 里面，同时把当前 set 塞到 activeEffect 的 deps 数组。最后如果是开发环境而且传入了 onTrack 函数，则触发 onTrack。所以 deps 就是 effect 中所依赖的 key 对应的 set 集合数组，毕竟一般来说，effect 中不止依赖一个对象或者不止依赖一个对象的一个key，而且一个对象可以能不止被一个 effect 使用，所以是 set 集合数组。

if (!shouldTrack || activeEffect === undefined) {
    return
  }
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }

依赖都收集完毕了，接下来就是触发依赖。如果 targetMap 为空，说明这个对象没有被追踪，直接return。

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // never been tracked
    return
  }
  ...
}

其中触发的 type, 包括了 set、add、delete 和 clear。

export const enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
  CLEAR = 'clear'
}

接下来对 key 收集的依赖进行分组，computedRunners 具有更高的优先级，会触发下游的 effects 重新收集依赖，

const effects = new Set() const computedRunners = new Set() add 方法是将 effect 添加进不同分组的函数，其中 effect !== activeEffect 这个是为了避免死循环，在下面的注释也写的很清楚，避免出现 foo.value++ 这种情况。至于为什么是 set 呢，要避免 effect 多次运行。就好像循环中，set 触发了 trigger ，那么 ITERATE 和当前 key 可能都属于同个 effect，这样就可以避免多次运行了。

const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
if (effectsToAdd) {
  effectsToAdd.forEach(effect => {
    if (effect !== activeEffect || !shouldTrack) {
      if (effect.options.computed) {
        computedRunners.add(effect)
      } else {
        effects.add(effect)
      }
    } else {
      // the effect mutated its own dependency during its execution.
      // this can be caused by operations like foo.value++
      // do not trigger or we end in an infinite loop
    }
  })
}
}

下面根据触发 key 类型的不同进行 effect 的处理。如果是 clear 类型，则触发这个对象所有的 effect。如果 key 是 length , 而且 target 是数组，则会触发 key 为 length 的 effects &#x

最低0.47元/天解锁文章

Peter 谭

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
致敬Vue3: 1.1万字从零解读Vue3.0源码响应式系统

原文地址:https://hkc452.github.io/slamdunk-the-vue3/作者:KCeffect 是响应式系统的核心，而响应式系统又是 vue3 中的核心，所以从 ...
复制链接

扫一扫