当前位置：首页 > article >正文

Vue3-管理状态 effectScope

article 2025/2/7 12:47:44

EffectScope 是 Vue 3.2 版本引入的一个新 API，它允许开发者创建一个 effect 作用域，以捕获在该作用域内创建的响应式副作用（如计算属性和侦听器）。这些副作用可以一起被处理，使得状态管理更加灵活和可控。以下是对 EffectScope 在全局或局部状态管理中使用的详细介绍：

一、EffectScope 的基本概念

EffectScope 提供了一个作用域，用于管理其内部创建的响应式 effect（包括计算属性、侦听器等）。通过 EffectScope，可以更方便地控制这些副作用的生命周期，以及在需要时停止它们。

二、EffectScope 的使用方法

创建 EffectScope：

使用 effectScope() 函数创建一个新的 EffectScope 实例。
```
const scope = effectScope();
```
运行副作用：

使用 scope.run() 方法在 EffectScope 中运行副作用。该方法接受一个回调函数，该回调函数内部可以定义计算属性、侦听器等。
```
scope.run(() => {
  const doubled = computed(() => counter.value * 2);
  watch(doubled, () => console.log(doubled.value));
  watchEffect(() => console.log('Count: ', doubled.value));
});
```
3、停止 EffectScope：

使用 scope.stop() 方法停止 EffectScope，并注销其内部的所有副作用。
```
scope.stop();
```

三、EffectScope 在全局或局部状态管理中的应用

全局状态管理：

在全局状态管理中，EffectScope 可以用于管理跨组件的响应式状态。例如，可以创建一个全局的 EffectScope 来管理某个全局状态，并在需要时停止该作用域内的所有副作用。

// 假设有一个全局的状态管理库
let globalState = reactive({
  count: 0,
});

const globalScope = effectScope();

globalScope.run(() => {
  const doubledCount = computed(() => globalState.count * 2);
  watch(doubledCount, () => {
    console.log('Global doubled count changed:', doubledCount.value);
  });
});

// 在某个组件中，可以访问和修改 globalState
// 当 globalState.count 变化时，globalScope 内的副作用会被触发

当不再需要全局状态时，可以调用 globalScope.stop() 来停止所有相关的副作用。

局部状态管理：

在局部状态管理中，EffectScope 可以用于管理组件内部的响应式状态。例如，在一个复杂的组件中，可能需要创建多个计算属性和侦听器来处理不同的状态变化。这时，可以使用 EffectScope 将这些副作用组织在一起，并在组件卸载时停止它们。

<template>
  <div>
    <p>{
    
    { localCount }}</p>
    <button @click="incrementLocalCount">Increment</button>
  </div>
</template>

<script setup>
import { ref, effectScope, computed, watchEffect } from 'vue';

const localCount = ref(0);

const localScope = effectScope();

localScope.run(() => {
  const doubledLocalCount = computed(() => localCount.value * 2);
  watchEffect(() => {
    console.log('Local doubled count:', doubledLocalCount.value);
  });

  watch(localCount, (newVal, oldVal) => {
    console.log('Local count changed from', oldVal, 'to', newVal);
  });
});

function incrementLocalCount() {
  localCount.value++;
}

// 在组件卸载时，可以调用 localScope.stop() 来停止所有副作用
// onUnmounted(() => {
//   localScope.stop();
// });
</script>

注意：在上面的示例中，虽然提供了在组件卸载时停止 EffectScope 的注释代码，但在 Vue 3 的 setup 函数中，通常不需要手动停止 EffectScope。因为 Vue 会自动管理组件的生命周期，并在组件卸载时停止所有相关的响应式副作用。然而，在某些特殊情况下（如动态创建和销毁 EffectScope），可能需要手动调用 scope.stop()。