Vue3源码解读：副作用收集依赖

一 副作用的深度

let effectTrackDepth = 0

例如，MyApp组件的模板访问了a计算属性，a计算属性访问了b计算属性。

则App组件的渲染副作用的深度是1，a计算属性副作用的深度是2，b计算属性副作用的深度是3。

二 副作用的最大标记位数

位运算是以32位带符号的整数进行运算的，并且返回值也是一个32位带符号的整数。

最高位是符号位，0表示正数，1表示负数。故这里限制为30。

const maxMarkerBits = 30

最大标记位数决定了依赖收集的方式。

// 追踪副作用
export function trackEffects(dep) {
  let shouldTrack = false
  // 副作用的深度不超过30，使用标记位方式收集依赖（新方式，效率高）
  if (effectTrackDepth <= maxMarkerBits) {
    if (!newTracked(dep)) {
      dep.n |= trackOpBit // set newly tracked
      shouldTrack = !wasTracked(dep)
    }
  }
  // 副作用的深度超过30，使用全量方式收集依赖（老方式，效率低）
  else {
    // Full cleanup mode.
    shouldTrack = !dep.has(activeEffect!);
  }

  if (shouldTrack) { 
    dep.add(activeEffect!);
    activeEffect!.deps.push(dep);
  }
}