如何理解 Vue 中的 effectscope？

什么是Vue中的effectscope？

在Vue.js中，effectScope 是一个用于管理副作用（例如响应式数据的观察者）的逻辑范围。它在 Vue 3 的 Composition API 中引入，主要目的是提供一种方式来组织和管理副作用，使得在组件销毁时能够自动停止所有相关的副作用，从而优化资源管理和避免内存泄漏。

它是如何工作的？

effectScope 允许开发者创建一个作用域，在这个作用域内部创建的所有副作用都可以被统一管理。使用 effectScope 可以手动或者自动的控制这些副作用的生命周期。当组件卸载或作用域被停止时，所有在该作用域中注册的副作用也会被自动停止。

使用例子

假设我们在一个 Vue 组件中使用了多个 watch 和 computed，我们可以将这些副作用放在一个 effectScope 中管理，以确保它们在组件销毁时被适当地清理。

javascript
import { effectScope, ref, watch, computed } from 'vue';

export default {
  setup() {
    const scope = effectScope();
    scope.run(() => {
      const count = ref(0);

      const doubled = computed(() => count.value * 2);

      watch(doubled, (newVal) => {
        console.log(`Count doubled is now: ${newVal}`);
      });
    });

    // 在组件卸载时，自动停止所有该作用域中的活跃副作用
    onUnmounted(() => {
      scope.stop();
    });
  }
};

在这个例子中，我们创建了一个 effectScope，并在其中注册了一个响应式引用 count、一个计算属性 doubled 和一个 watch 监听器。这些副作用都被 effectScope 包裹，保证了在组件的生命周期结束时，所有这些副作用可以被自动停止，有效避免内存泄漏。

总结

effectScope 提供了一种高效的方式来管理和维护大量的副作用，尤其在复杂的组件或应用中，它能够帮助开发者更好地控制副作用的生命周期，防止潜在的资源浪费和错误。通过将相关的副作用放置于同一作用域，开发者可以更容易地维护和理解代码的副作用逻辑。