watchEffect()和effectScope()

watchEffect立即运行一个函数，同时响应式地追踪其依赖，在依赖更新时重新执行。

特性：

1.立即执行，没有惰性（相当于watch设置{ immediate: true }）

2.不需要传递侦听的内容，会自动感知代码依赖，只要传递一个回调参数就行。

3.不能获取以前的数值，只能获取当前值。

4. flush: 'post' （当更改了响应式状态，可能会同时触发Vue组件更新和侦听器回调，默认情况下侦听器回调会在组件更新之前被调用，如果想在侦听器中访问到Vue更新之后的dom，需设置{flush:'post'} 或者使用watchPostEffect）

5. 深度监听（相当于watch设置{deep:true}）

好处：对于有多个依赖项的侦听器，使用watchEffect()可以消除手动维护依赖列表的负担。此外，如果监听一个嵌套数据结构中的几个属性，watchEffect()比深度侦听器更有效，因为它只跟踪回调中被使用到的属性，而不是地柜跟踪所有属性。

effectScope()

创建一个effect作用域，可以捕获其中所创建的响应式副作用（即计算属性和侦听器），捕获到的副作用可以一起处理。

比如要实现watchEffect在执行一次后停止，可以使用effectScope()

<script setup lang="ts">
import { ref, computed, watch, watchEffect, effectScope } from "vue"

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

// use `effectScope` API to make these effect stop together after triggered once

const scope1 = effectScope()
scope1.run(() => {
  watch(doubled, () => {
    console.log(doubled.value)
    scope1.stop()
  })
})

const scope2 = effectScope()
scope2.run(() => {
  watchEffect(() => {
    console.log("Count: ", doubled.value)
    scope2.stop()
  })
})

counter.value = 2

setTimeout(() => {
  counter.value = 4
})

</script>

<template>
  <div>
    <p>
      {{ doubled }}
    </p>
  </div>
</template>

effectScope 的主要用途

主要用途是便于回收监听器(副作用/effects)，防止内存泄露

一般情况，在组件的setup中声明的变量和监听器，随着组件的销毁会自动销毁。但在组件之外，这些变量和监听器没有绑定组件，必须手动销毁，使用effectScope可以一次性收集到所有的监听器，然后调用它的stop方法一次性销毁。effectScope提供了一个便捷的销毁方式。

参考链接： effectScope 的主要用途 - 简书 (jianshu.com)