Vue3中 effectScope API

effectScope 可以直接控制响应式副作用的施放时间

<script setup>
  import { reactive, watch, watchEffect, computed, effectScope } from "vue";

  const scope = effectScope()  // 创建一个作用域

  const data = reactive({
    counter: 0,
    incrementCounter: ''
  })

  setInterval(() => {
    data.counter++
  }, 1000)

  scope.run(() => {  // 将所有的产生副作用的函数  收集起来
    data.incrementCounter = computed(() => data.counter * 2)
    watch(
      () => data.counter,
      (newVal, oldVal) => {
        console.log(`新值${newVal}---旧值${oldVal}`)
      }
    )

    watchEffect(() => {
      console.log(data.counter, 'watchEffect')
    })
  })

  setTimeout(() => { // 将来在不需要的时候  将所有副作用 释放
    scope.stop()
  }, 8000)
  
</script>

上面代码 设置了一个 counter 响应式变量，每一秒会发生一次变化，每当变化会重新计算 counter * 2 并定义了incrementCounter接受，并且每次发生变化都会在控制台打印输出 counter 的值

当我们不需要 重新计算、不需要控制台打印的时候。要解锁 computed 、watch、watchEffect这些副作用，要不然会占资源，造成内存上的泄露 。effectScope 就很好的实现，核心思想是说：调用effectScope创建一个作用域，然后调用 run  函数 将所有产生副作用的依赖收集起来，将来在不需要的时候调用stop，run收集起来的副作用将全部释放。

上面的例子就是 前8秒 控制台会每隔1秒一直打印、并且一直计算当前couter * 2，8秒之后，控制台将不会打印，也不会再去计算couter * 2，incrementCounter将会是最后一次计算的值 也就是16