onScopeDispose 与 scope.cleanups

Question

我正在检查一些源代码以确保在组件被销毁时我的事件总线被正确清理并且运行进入 scope.cleanups（来自 https://github.com/vueuse/vueuse/blob/main/packages/core/useEventBus/index.ts）：

const scope = getCurrentScope()
scope?.cleanups?.push(/* handler */)

这是 onScopeDispose (https://vuejs.org/api/reactivity-advanced.html#onscopedispose) 的未记录替代品吗？我似乎找不到任何相关信息。

Answer 1

scope?.cleanups?.push() 几乎就是 same implementation in onScopeDispose():

export function getCurrentScope() {
  return activeEffectScope
}

export function onScopeDispose(fn: () => void) {
  if (activeEffectScope) {
    activeEffectScope.cleanups.push(fn) 
  }
  ⋮
}

一个显着差异是 cleanups 上的可选链接在 onScopeDispose() 中不存在。 git blame on that line in useEventBus() 表示添加了可选链接，因为 cleanups 在 Vue 2 中可能是 undefined/null。

似乎使用官方 API (onScopeDispose()) 是更好的选择，因为 cleanups 本质上是用户不应该知道的私有实现细节。

onScopeDispose 与 scope.cleanups

onScopeDispose vs scope.cleanups

vue.js

vuejs3

vue-composition-api