집 > 기사 > 웹 프론트엔드 > Vue3 부작용 함수 및 종속성 수집 예제 분석

Vue3 부작용 함수 및 종속성 수집 예제 분석

WBOY앞으로: 2023-05-11 20:13:101261검색

부작용 함수

부작용 함수는 다음 코드와 같이 부작용을 일으키는 함수를 말합니다.

function effect(){
  document.body.innerText = &#39;hello vue3&#39;
}

효과 함수가 실행되면 본문의 텍스트 내용이 설정되지만 그 외의 모든 기능은 효과 기능이 수행하는 것보다 본문의 텍스트 내용을 읽거나 설정합니다. 즉, 효과 함수의 실행은 다른 기능의 실행에 직간접적으로 영향을 미치게 됩니다. 이때 효과 함수에는 부작용이 있다고 말합니다. 예를 들어, 함수가 전역 변수를 수정하는 경우 이는 실제로 부작용입니다.

// 全局变量
let val = 1
function effect() {
  val = 2 // 修改全局变量，产生副作用
}

부작용 함수의 전역 변수

부작용 모듈에는 여러 가지 전역 변수가 정의되어 있습니다. 이러한 변수를 미리 알고 있으면 부작용 함수의 생성 및 호출 과정을 이해하는 데 도움이 됩니다.

// packages/reactivity/src/effect.ts
export type Dep = Set<ReactiveEffect> & TrackedMarkers
type KeyToDepMap = Map<any, Dep>
// WeakMap 集合存储副作用函数
const targetMap = new WeakMap<any, KeyToDepMap>()

// 用一个全局变量存储当前激活的 effect 函数
export let activeEffect: ReactiveEffect | undefined

// 标识是否开启了依赖收集
export let shouldTrack = true
const trackStack: boolean[] = []

targetMap

targetMap은 부작용 함수를 저장하는 데 사용되는 WeakMap 유형의 모음입니다. 유형 정의에서 targetMap의 데이터 구조를 볼 수 있습니다.

WeakMap은 target -->에 의해 생성됩니다. Map 구성 target --> Map 构成
Map 由 key --> Set

Map은 key --> Set

Vue3 부작용 함수 및 종속성 수집 예제 분석 으로 구성됩니다. 여기서 WeakMap의 키는 원래 객체 대상이고 WeakMap의 값은 Map 인스턴스입니다. Map의 키는 원래 객체 대상입니다. Map의 키와 값은 부작용 기능으로 구성된 Set입니다. 이들의 관계는 다음과 같습니다.

targetMap WeakMap을 사용하는 이유

다음 코드를 살펴보겠습니다.

const map = new Map();
const weakMap = new WeakMap();

(function() {
  const foo = {foo: 1};
  const bar = {bar: 2};
  
  map.set(foo, 1); // foo 对象是 map 的key
  weakMap.set(bar, 2); // bar 对象是 weakMap 的 key
})

위 코드에서는 각각 Map 및 WeakMap의 인스턴스에 해당하는 map 및 WeakMap 상수가 정의되어 있습니다. 즉시 실행되는 함수 표현식 내에는 foo와 bar라는 두 개의 객체가 정의되어 있으며 각각 map과 WeakMap의 키 역할을 합니다.

함수 표현식이 실행된 후에도 foo 객체는 여전히 맵의 키로 참조되므로

가비지 수집기

는 이를 메모리에서 제거하지 않으며 여전히 map.keys Out을 통해 인쇄할 수 있습니다. 개체 foo.

객체 막대의 경우 WeakMap의 키가 약한 참조이므로 가비지 수집기의 작업에 영향을 미치지 않으므로 일단 표현식이 실행되면 가비지 수집기가 객체 막대를 메모리에서 제거하므로 우리는 얻을 수 없습니다. WeakMap의 키 값은 WeakMap을 통해 개체 표시줄을 얻을 수 없음을 의미합니다.

간단히 말하면,

WeakMap은 키에 대한 약한 참조를 가지며 가비지 수집기 작업에 영향을 주지 않습니다

**. 이 기능에 따르면 가비지 수집기에서 키를 재활용하면 해당 키와 값에 액세스할 수 없습니다. 따라서 WeakMap은 키로 참조되는 객체가 존재할 때만(재활용되지 않은)** 가치 있는 정보를 저장하는 데 자주 사용됩니다.

예를 들어 위 시나리오에서 대상 개체에 참조가 없으면 사용자 측에서는 더 이상 참조가 필요하지 않으며 가비지 수집기가 재활용 작업을 완료한다는 의미입니다. 하지만 WeakMap 대신 Map을 사용하면 사용자 측 코드에 대상에 대한 참조가 없더라도 대상이 재활용되지 않아 결국 메모리 오버플로가 발생할 수 있습니다.

activeEffect

activeEffect 변수는 현재 실행 중인 부작용을 유지하는 데 사용됩니다.

shouldTrack

shouldTrack 변수는 종속성 수집이 활성화되어 있는지 여부를 식별하는 데 사용됩니다. shouldTrack 값이 true입니다. , 종속성 컬렉션 중간에 부작용 기능이 추가됩니다.

부작용 구현

효과 함수

효과 API는 사용자 정의 fn 함수와 옵션 옵션이라는 두 개의 매개변수를 허용하는 부작용 함수를 만드는 데 사용됩니다. 소스 코드는 다음과 같습니다.

// packages/reactivity/src/effect.ts

export function effect<T = any>(
  fn: () => T,
  options?: ReactiveEffectOptions
): ReactiveEffectRunner {
  // 当传入的 fn 中存在 effect 副作用时，将这个副作用的原始函数赋值给 fn
  if ((fn as ReactiveEffectRunner).effect) {
    fn = (fn as ReactiveEffectRunner).effect.fn
  }

  // 创建一个副作用 
  const _effect = new ReactiveEffect(fn)

  if (options) {
    extend(_effect, options)
    if (options.scope) recordEffectScope(_effect, options.scope)
  }

//   如果不是延迟执行的，则立即执行一次副作用函数
  if (!options || !options.lazy) {
    _effect.run()
  }
  // 通过 bind 函数返回一个新的副作用函数   
  const runner = _effect.run.bind(_effect) as ReactiveEffectRunner
  // 将副作用添加到新的副作用函数上   
  runner.effect = _effect
  // 返回这个新的副作用函数   
  return runner
}

위 코드를 보면 전달된 매개변수 fn에 효과 부작용이 있는 경우 해당 부작용의 원래 기능이 fn에 할당되어 있음을 알 수 있습니다. 그런 다음 ReactiveEffect 클래스를 호출하여 캡슐화된 부작용 함수를 만듭니다.

일부 시나리오에서는 효과가 즉시 실행되는 것을 원하지 않지만 필요할 때 실행되기를 원합니다. 옵션에 게으른 속성을 추가하면 됩니다. 효과 함수 소스 코드에서 options.lazy 옵션의 값을 결정하면 해당 값이 true인 경우 부작용 함수가 즉시 실행되지 않아 지연 실행 효과가 나타납니다.

그런 다음 바인드 함수를 사용하여 새 부작용 함수 실행기를 반환합니다. 이 새 함수의 this는 _효과로 지정되고, 이 새 부작용 함수의 effect 속성에 _효과를 추가하고 마지막으로 이 새 부작용 함수를 반환합니다.

효과 API는 캡슐화된 부작용 함수를 반환하므로 원래 부작용 함수는 캡슐화된 부작용 함수의 effect 속성에 저장됩니다. 따라서 사용자가 전달한 부작용 함수를 얻으려면 다음이 필요합니다.

fn. effect.fn

와서 받아가세요.

ReactiveEffect 클래스는 부작용을 생성하기 위해 효과 함수에서 호출됩니다. 다음으로 ReactiveEffect 클래스의 구현을 살펴보겠습니다.

ReactiveEffect 클래스🎜

// packages/reactivity/src/effect.ts

export class ReactiveEffect<T = any> {
  active = true
  deps: Dep[] = []
  parent: ReactiveEffect | undefined = undefined

  /**
   * Can be attached after creation
   * @internal
   */
  computed?: ComputedRefImpl<T>
  /**
   * @internal
   */
  allowRecurse?: boolean

  onStop?: () => void
  // dev only
  onTrack?: (event: DebuggerEvent) => void
  // dev only
  onTrigger?: (event: DebuggerEvent) => void

  constructor(
    public fn: () => T,
    public scheduler: EffectScheduler | null = null,
    scope?: EffectScope
  ) {
    recordEffectScope(this, scope)
  }
  
  run() {
    // 如果 effect 已停用，返回原始副作用函数执行后的结果
    if (!this.active) {
      return this.fn()
    }
    let parent: ReactiveEffect | undefined = activeEffect
    let lastShouldTrack = shouldTrack
    while (parent) {
      if (parent === this) {
        return
      }
      parent = parent.parent
    }
    try {
      // 创建一个新的副作用前将当前正在执行的副作用存储到新建的副作用的 parent 属性上，解决嵌套effect 的情况
      this.parent = activeEffect
      // 将创建的副作用设置为当前正则正在执行的副作用   
      activeEffect = this
      // 将 shouldTrack 设置为 true，表示开启依赖收集
      shouldTrack = true

      trackOpBit = 1 << ++effectTrackDepth

      if (effectTrackDepth <= maxMarkerBits) {
        // 初始化依赖
        initDepMarkers(this)
      } else {
        // 清除依赖
        cleanupEffect(this)
      }
    //   返回原始副作用函数执行后的结果
      return this.fn()
    } finally {
      if (effectTrackDepth <= maxMarkerBits) {
        finalizeDepMarkers(this)
      }

      trackOpBit = 1 << --effectTrackDepth

      // 重置当前正在执行的副作用   
      activeEffect = this.parent
      shouldTrack = lastShouldTrack
      this.parent = undefined
    }
  }
  // 停止(清除) effect
  stop() {
    if (this.active) {
      cleanupEffect(this)
      if (this.onStop) {
        this.onStop()
      }
      this.active = false
    }
  }
}

🎜ReactiveEffect 클래스에는 run 메소드가 정의되어 있습니다. 이 run 메소드는 Side Effect 생성 시 실제 실행되는 메소드입니다. 업데이트가 전달될 때마다 이 실행 메서드가 실행되어 값이 업데이트됩니다. 🎜

全局变量 activeEffect 用来维护当前正在执行的副作用，当存在嵌套渲染组件的时候，依赖收集后，副作用函数会被覆盖，即 activeEffect 存储的副作用函数在嵌套 effect 的时候会被内层的副作用函数覆盖。为了解决这个问题，在 run 方法中，将当前正在执行的副作用activeEffect保存到新建的副作用的 parent 属性上，然后再将新建的副作用设置为当前正在执行的副作用。在新建的副作用执行完毕后，再将存储到 parent 属性的副作用重新设置为当前正在执行的副作用。

在 ReactiveEffect 类中，还定义了一个 stop 方法，该方法用来停止并清除当前正在执行的副作用。

track 收集依赖

当使用代理对象访问对象的属性时，就会触发代理对象的 get 拦截函数执行，如下面的代码所示：

const obj = { foo: 1 }

const p = new Proxy(obj, {
  get(target, key, receiver) {
    track(target, key)
    return Reflect.get(target, key, receiver)
  }
}) 

p.foo

在上面的代码中，通过代理对象p 访问 foo 属性，便会触发 get 拦截函数的执行，此时就在 get 拦截函数中调用 track 函数进行依赖收集。源码中 get 拦截函数的解析可阅读《Vue3 源码解读之非原始值的响应式原理》一文中的「访问属性的拦截」小节。

下面，我们来看看 track 函数的实现。

track 函数

// packages/reactivity/src/effect.ts

// 收集依赖
export function track(target: object, type: TrackOpTypes, key: unknown) {
    // 如果开启了依赖收集并且有正在执行的副作用，则收集依赖
  if (shouldTrack && activeEffect) {
    // 在 targetMap 中获取对应的 target 的依赖集合
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      // 如果 target 不在 targetMap 中，则加入，并初始化 value 为 new Map()
      targetMap.set(target, (depsMap = new Map()))
    }
    // 从依赖集合中获取对应的 key 的依赖
    let dep = depsMap.get(key)
    if (!dep) {
      // 如果 key 不存在，将这个 key 作为依赖收集起来，并初始化 value 为 new Set()
      depsMap.set(key, (dep = createDep()))
    }

    const eventInfo = __DEV__
      ? { effect: activeEffect, target, type, key }
      : undefined

    trackEffects(dep, eventInfo)
  }
}

在 track 函数中，通过一个 if 语句判断是否进行依赖收集，只有当 shouldTrack 为 true 并且存在 activeEffect，即开启了依赖收集并且存在正在执行的副作用时，才进行依赖收集。

然后通过 target 对象从 targetMap 中尝试获取对应 target 的依赖集合depsMap，如果 targetMap 中不存在当前target的依赖集合，则将当前 target 添加进 targetMap 中，并将 targetMap 的 value 初始化为 new Map()。

// 在 targetMap 中获取对应的 target 的依赖集合
let depsMap = targetMap.get(target)
if (!depsMap) {
  // 如果 target 不在 targetMap 中，则加入，并初始化 value 为 new Map()
  targetMap.set(target, (depsMap = new Map()))
}

接着根据target中被读取的 key，从依赖集合depsMap中获取对应 key 的依赖，如果依赖不存在，则将这个 key 的依赖收集到依赖集合depsMap中，并将依赖初始化为 new Set()。

// 从依赖集合中获取对应的 key 的依赖
let dep = depsMap.get(key)
if (!dep) {
  // 如果 key 不存在，将这个 key 作为依赖收集起来，并初始化 value 为 new Set()
  depsMap.set(key, (dep = createDep()))
}

最后调用 trackEffects 函数，将副作用函数收集到依赖集合depsMap中。

const eventInfo = __DEV__
  ? { effect: activeEffect, target, type, key }
  : undefined

trackEffects(dep, eventInfo)

trackEffects 函数

// 收集副作用函数
export function trackEffects(
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  let shouldTrack = false
  if (effectTrackDepth <= maxMarkerBits) {
    if (!newTracked(dep)) {
      dep.n |= trackOpBit // set newly tracked
      shouldTrack = !wasTracked(dep)
    }
  } else {
    // Full cleanup mode.
    // 如果依赖中并不存当前的 effect 副作用函数
    shouldTrack = !dep.has(activeEffect!)
  }

  if (shouldTrack) {
    // 将当前的副作用函数收集进依赖中
    dep.add(activeEffect!)
    // 并在当前副作用函数的 deps 属性中记录该依赖
    activeEffect!.deps.push(dep)
    if (__DEV__ && activeEffect!.onTrack) {
      activeEffect!.onTrack(
        Object.assign(
          {
            effect: activeEffect!
          },
          debuggerEventExtraInfo
        )
      )
    }
  }
}

在 trackEffects 函数中，检查当前正在执行的副作用函数 activeEffect 是否已经被收集到依赖集合中，如果没有，就将当前的副作用函数收集到依赖集合中。同时在当前副作用函数的 deps 属性中记录该依赖。

trigger 派发更新

当对属性进行赋值时，会触发代理对象的 set 拦截函数执行，如下面的代码所示：

const obj = { foo: 1 }

const p = new Proxy(obj, {
  // 拦截设置操作
  set(target, key, newVal, receiver){
    // 如果属性不存在，则说明是在添加新属性，否则设置已有属性
    const type = Object.prototype.hasOwnProperty.call(target,key) ?  &#39;SET&#39; : &#39;ADD&#39;
    
    // 设置属性值
    const res = Reflect.set(target, key, newVal, receiver)
    // 把副作用函数从桶里取出并执行，将 type 作为第三个参数传递给 trigger 函数
    trigger(target,key,type)
    
    return res
  }
  
  // 省略其他拦截函数
})

p.foo = 2

在上面的代码中，通过代理对象p 访问 foo 属性，便会触发 set 拦截函数的执行，此时就在 set 拦截函数中调用 trigger 函数中派发更新。源码中 set 拦截函数的解析可阅读《Vue3 源码解读之非原始值的响应式原理》一文中的「设置属性操作的拦截」小节。

下面，我们来看看 track 函数的实现。

trigger 函数

trigger 函数的源码如下：

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  const depsMap = targetMap.get(target)
  // 该 target 从未被追踪，则不继续执行
  if (!depsMap) {
    // never been tracked
    return
  }

  // 存放所有需要派发更新的副作用函数  
  let deps: (Dep | undefined)[] = []
  if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    // 当需要清除依赖时，将当前 target 的依赖全部传入
    deps = [...depsMap.values()]
  } else if (key === &#39;length&#39; && isArray(target)) {
    // 处理数组的特殊情况
    depsMap.forEach((dep, key) => {
      // 如果对应的长度, 有依赖收集需要更新
      if (key === &#39;length&#39; || key >= (newValue as number)) {
        deps.push(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    // 在 SET | ADD | DELETE 的情况，添加当前 key 的依赖
    if (key !== void 0) {
      deps.push(depsMap.get(key))
    }

    // also run for iteration key on ADD | DELETE | Map.SET
    switch (type) {
      case TriggerOpTypes.ADD:
        if (!isArray(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            // 操作类型为 ADD 时触发Map 数据结构的 keys 方法的副作用函数重新执行
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          // new index added to array -> length changes
          deps.push(depsMap.get(&#39;length&#39;))
        }
        break
      case TriggerOpTypes.DELETE:
        if (!isArray(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            // 操作类型为 DELETE 时触发Map 数据结构的 keys 方法的副作用函数重新执行
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        }
        break
      case TriggerOpTypes.SET:
        if (isMap(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
        }
        break
    }
  }

  const eventInfo = __DEV__
    ? { target, type, key, newValue, oldValue, oldTarget }
    : undefined

  if (deps.length === 1) {
    if (deps[0]) {
      if (__DEV__) {
        triggerEffects(deps[0], eventInfo)
      } else {
        triggerEffects(deps[0])
      }
    }
  } else {
    const effects: ReactiveEffect[] = []
    // 将需要执行的副作用函数收集到 effects 数组中
    for (const dep of deps) {
      if (dep) {
        effects.push(...dep)
      }
    }
    if (__DEV__) {
      triggerEffects(createDep(effects), eventInfo)
    } else {
      triggerEffects(createDep(effects))
    }
  }
}

在 trigger 函数中，首先检查当前 target 是否有被追踪，如果从未被追踪过，即target的依赖未被收集，则不需要执行派发更新，直接返回即可。

const depsMap = targetMap.get(target)
// 该 target 从未被追踪，则不继续执行
if (!depsMap) {
  // never been tracked
  return
}

接着创建一个 Set 类型的 deps 集合，用来存储当前target的这个 key 所有需要执行派发更新的副作用函数。

// 存放所有需要派发更新的副作用函数  
let deps: (Dep | undefined)[] = []

接下来就根据操作类型type 和 key 来收集需要执行派发更新的副作用函数。

如果操作类型是 TriggerOpTypes.CLEAR ，那么表示需要清除所有依赖，将当前target的所有副作用函数添加到 deps 集合中。

if (type === TriggerOpTypes.CLEAR) {
  // collection being cleared
  // trigger all effects for target
  // 当需要清除依赖时，将当前 target 的依赖全部传入
  deps = [...depsMap.values()]
}

如果操作目标是数组，并且修改了数组的 length 属性，需要把与 length 属性相关联的副作用函数以及索引值大于或等于新的 length 值元素的相关联的副作用函数从 depsMap 中取出并添加到 deps 集合中。

else if (key === &#39;length&#39; && isArray(target)) {
  // 如果操作目标是数组，并且修改了数组的 length 属性
  depsMap.forEach((dep, key) => {
    // 对于索引大于或等于新的 length 值的元素，
    // 需要把所有相关联的副作用函数取出并添加到 deps 中执行
    if (key === &#39;length&#39; || key >= (newValue as number)) {
      deps.push(dep)
    }
  })
}

如果当前的 key 不为 undefined，则将与当前key相关联的副作用函数添加到 deps 集合中。注意这里的判断条件 void 0，是通过 void 运算符的形式表示 undefined 。

if (key !== void 0) {
  deps.push(depsMap.get(key))
}

接下来通过 Switch 语句来收集操作类型为 ADD、DELETE、SET 时与 ITERATE_KEY 和 MAP_KEY_ITERATE_KEY 相关联的副作用函数。

// also run for iteration key on ADD | DELETE | Map.SET
switch (type) {
  case TriggerOpTypes.ADD:
    if (!isArray(target)) {
      deps.push(depsMap.get(ITERATE_KEY))
      if (isMap(target)) {
        // 操作类型为 ADD 时触发Map 数据结构的 keys 方法的副作用函数重新执行
        deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
      }
    } else if (isIntegerKey(key)) {
      // new index added to array -> length changes
      deps.push(depsMap.get(&#39;length&#39;))
    }
    break
  case TriggerOpTypes.DELETE:
    if (!isArray(target)) {
      deps.push(depsMap.get(ITERATE_KEY))
      if (isMap(target)) {
        // 操作类型为 DELETE 时触发Map 数据结构的 keys 方法的副作用函数重新执行
        deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
      }
    }
    break
  case TriggerOpTypes.SET:
    if (isMap(target)) {
      deps.push(depsMap.get(ITERATE_KEY))
    }
    break
}

最后调用 triggerEffects 函数，传入收集的副作用函数，执行派发更新。

const eventInfo = __DEV__
  ? { target, type, key, newValue, oldValue, oldTarget }
  : undefined

if (deps.length === 1) {
  if (deps[0]) {
    if (__DEV__) {
      triggerEffects(deps[0], eventInfo)
    } else {
      triggerEffects(deps[0])
    }
  }
} else {
  const effects: ReactiveEffect[] = []
  // 将需要执行的副作用函数收集到 effects 数组中
  for (const dep of deps) {
    if (dep) {
      effects.push(...dep)
    }
  }
  if (__DEV__) {
    triggerEffects(createDep(effects), eventInfo)
  } else {
    triggerEffects(createDep(effects))
  }
}

triggerEffects 函数

export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // spread into array for stabilization
  // 遍历需要执行的副作用函数集合   
  for (const effect of isArray(dep) ? dep : [...dep]) {
    // 如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行
    if (effect !== activeEffect || effect.allowRecurse) {
      if (__DEV__ && effect.onTrigger) {
        effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
      }
      if (effect.scheduler) {
        // 如果一个副作用函数存在调度器，则调用该调度器
        effect.scheduler()
      } else {
        // 否则直接执行副作用函数
        effect.run()
      }
    }
  }
}

在 triggerEffects 函数中，遍历需要执行的副作用函数集合，如果当前副作用函数存在调度器，则执行该调度器，否则直接执行该副作用函数的 run 方法，执行更新。

위 내용은 Vue3 부작용 함수 및 종속성 수집 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 yisu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Vue3에서 데이터가 변경되면 자동으로 요청을 발행하는 방법다음 기사：Vue3에서 데이터가 변경되면 자동으로 요청을 발행하는 방법