特殊的 Api

effectScope & onScopeDispose

TIP

在Vue的setup中，响应会在开始初始化的时候被收集，在实例被卸载的时候，响应就会自动的被取消追踪了，这时一个很方便的特性。但是，当我们在组件外使用或者编写一个独立的包时，这会变得非常麻烦。当在单独的文件中，我们该如何停止computed & watch的响应式依赖呢？

• 概述：effectScope可以创建收集产生副作用函数Effect的作用域
  • computed
  • watch
  • watchEffect

import { effectScope, ref, computed, watch, watchEffect } from 'vue'

const scope = effectScope()

scope.run(() => {
  const count = ref(1)
  const db = computed(() => count.value * 2)
  watch(count, () => console.log(count.value))
  watchEffect(() => {
    console.log(count.value)
  })
})

// 统一收集清除
scope.stop()

• 概述：onScopeDispose，当scope.stop()停止一个作用域时触发。

TIP

每一个Vue-Setup都会创建一个属于自己的scope，当没有使用effectScope创建scope时，onScopeDispose相当于onUnMounted

// ...

scope.run(() => {
  // 当 scope.stop() 时触发
  onScopeDispose(() => {
    console.log('clear')
  })
})
scope.stop()

getCurrentScope