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(() => { // 将来在不需要的时候  将所