亲宝软件园·资讯

展开

Vue3 EffectScope

前端精髓 人气:0

Vue 3.2 版本引入了新的 Effect scope API,使用 effectScope 创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和侦听器),这样捕获到的副作用可以一起处理。使用 getCurrentScope 返回当前活跃的 effect 作用域。使用 onScopeDispose 在当前活跃的 effect 作用域上注册一个处理回调函数。当相关的 effect 作用域停止时会调用这个回调函数。

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()

在 Vue 的 setup 中,响应会在开始初始化的时候被收集,在实例被卸载的时候,响应就会自动的被取消追踪了,这时一个很方便的特性。

但是,当我们在组件外使用或者编写一个独立的包时,这会变得非常麻烦。当在单独的文件中,我们该如何停止 computed & watch 的响应式依赖呢?

示例代码,参考链接

const disposables = []

const counter = ref(0)
const doubled = computed(() => counter.value * 2)

disposables.push(() => stop(doubled.effect))

const stopWatch1 = watchEffect(() => {
  console.log(`counter: ${counter.value}`)
})

disposables.push(stopWatch1)

const stopWatch2 = watch(doubled, () => {
  console.log(doubled.value)
})

disposables.push(stopWatch2)

上面的代码中,我们写了一共三个 computed & watch 的响应式依赖,把这些响应式依赖的 stopHandle 都存到一个数组中,意思是我们需要维护这个数组,这样将来在需要的时候,就可以像下面这样,直接把所有的响应都停掉:

disposables.forEach((f) => f())
disposables = []

尤其是当我们有一些长而复杂的组合式函数代码时,手动收集所有响应式依赖是很费力的。也很容易忘记收集它们(或者您无法访问在组合式函数中创建的响应式依赖),这可能会导致内存泄漏和意外行为。

该特性就是试图将组件的 setup() 响应式依赖收集和处理功能抽象为更通用的 API,该 API 可以在组件模型之外复用。

它还提供了从组件的 setup() 范围或用户定义的范围创建“分离” effects 的功能。

这个功能解决了什么问题?

// global shared reactive state
let foo

function useFoo() {
  if (!foo) { // lazy initialization
      foo = ref()
      watch(foo, ...) // <- this is stopped when component that created it is unmounted
      // make some http calls etc
  }
  return foo
}

component1 = {
    setup() {
        useFoo() // lazily initialize
    }
}

component2 = {
    setup() {
        useFoo() // lazily initialize
    }
}

我有一个在多个组件之间共享功能的组合式函数,问题是当卸载第一个调用的组件时 component1 停止 useFoo 响应式依赖。因为如果不停止对全局变量 foo 又有影响,其他 component2 组件调用有问题。

加载全部内容

相关教程
猜你喜欢
用户评论