Vue 3.2 版本引入了新的 Effect scope API，使用 effectScope 创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。getCurrentScope 方法可用于获取当前活跃的 effect 作用域。在当前激活的 effect 作用域中注册一个处理回调函数，使用 onScopeDispose。当相关的 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 stopWatch2 = watchEffect(() => {
console.log(`counter: ${counter.value}`)
})
disposables.push(stopWatch2)
const stopWatch3 = watch(doubled, () => {
console.log(doubled.value)
})
disposables.push(stopWatch3)上面的代码中，我们写了一共三个 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 的影响会影响其他组件的调用，因此需要停止这种影响。
以上就是Vue3里的EffectScope怎么使用的详细内容，转载自php中文网
发表评论 取消回复