effectScope副作用管理域 — Vue3.2 API

首先，解释一下它为谁而来？解决了什么问题？

我们知道 watchEffect  函数，同computed、watch（immediate）相似，页面打开执行一次，并且所依赖的响应式数据发生改变时再次执行该函数，区别是 watchEffect 不需要指定监听的属性，它会自动的收集依赖， 只要我们回调中引用到了 响应式的属性，改变了就会再次执行

举个例子：

const scope = effectScope()
let counter = ref(0)
setInterval(() => {
  counter.value++
}, 1000);

watchEffect(() =>console.log(`counter: ${counter.value}`))

/*log:
counter: 0
counter: 1
counter: 2
counter: 3
counter: 4
counter: 5
......
*/

我们不停止，浏览器会一直输出conter的值：

这样在一定的业务上很大程度方便了开发，但是有些业务上不免造成不必要的麻烦，这个时候就要停止他的依赖。

effectScope

在Vue3.2中，新的API-----effectScope API出现了，专门用来解决这个问题。
首先，effectScope是一个函数，调用effectScope函数会返回一个effect 作用域对象，其中包含了run（一个函数）和stop（一个函数），以捕获在其内部创建的响应式 effect (例如计算属性或侦听器)，使得这些 effect 可以一起被处理

const scope = effectScope()
let counter = ref(0)
setInterval(() => {
  counter.value++
}, 1000);

scope.run(() => {
  watchEffect(() =>console.log(`counter: ${counter.value}`))
})
scope.stop()

/*log:
counter: 0
*/

这样，在run中定义的计算属性或侦听器（computed，watch, watchEffect等 ），在调用了scope对象的stop()方法之后，所有的依赖都被停止，只在初始化的时候调用一次。