Vue.js

# Effect 作用域 API 3.2+

INFO

Effect 作用域是一个高阶的 API，主要服务于库作者。关于其使用细节请咨询相应的 RFC(opens new window) 。

# effectScope

创建一个 effect 作用域对象，以捕获在其内部创建的响应式 effect (例如计算属性或侦听器)，使得这些 effect 可以一起被处理。

类型：

function effectScope(detached?: boolean): EffectScope

interface EffectScope {
  run<T>(fn: () => T): T | undefined // 如果这个域不活跃则为 undefined
  stop(): void
}
1
2
3
4
5
6

示例：

const scope = effectScope()

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// 处理该作用域内的所有 effect
scope.stop()
1
2
3
4
5
6
7
8
9
10
11
12

# getCurrentScope

如果有，则返回当前活跃的 effect 作用域。

类型：

function getCurrentScope(): EffectScope | undefined
1

# onScopeDispose

在当前活跃的 effect 作用域上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用。

该方法在复用组合式函数时可用作 onUmounted 的非组件耦合替代品，因为每个 Vue 组件的 setup() 函数也同样在 effect 作用域内被调用。

类型：

function onScopeDispose(fn: () => void): void
1

← 组合式 API →