Vue3 reactive 源码里的 triggerEffects 函数？

Question

// packages/reactivity/src/effect.ts

export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // spread into array for stabilization
  const effects = isArray(dep) ? dep : [...dep]
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
}

Vue3 reactive 源码里的 triggerEffects 函数，请问这个函数里，这两个 for 循环，不是将所有的 effects 都作用上了吗，为什么要分成两个 for 循环执行呢？是考虑到事件流执行顺序吗？计算属性先执行，非计算属性后执行？

Answer 1

没错，triggerEffects 函数里的两个 for 循环是为了让计算属性（computed）的副作用函数先在非计算属性的副作用函数执行。这样处理是为了让计算属性值是最新的，减少没必要的重复计算