vue3中的effectScope有什么作用,如何使用?如何自动清理

vue3中的effectScope有什么作用,如何使用?如何自动清理

vue3中的effectScope有什么作用,如何使用

官网介绍:

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

作用

scope.run内可创建多个 像watchwatchEffect这种响应式函数,然后通过scope.stop()停止里面的所有响应式函数。

批量管理副作用: 可以把多个 effect 函数放到一个 effectScope 里,然后通过 effectScope.stop() 方法一次性停止所有这些副作用函数的运行。
组件卸载时清理副作用: 在组件卸载时,使用 effectScope 能够更方便地清理所有相关的副作用,避免内存泄漏。
支持嵌套作用域

特点

  • Vue 3.2+ 新增的 API
  • 主要用于组织和批量管理 effect
  • 特别适合在组件 setup 中使用
  • 支持自动清理

简单示例:

html 复制代码
<script setup lang="ts">
  import { effectScope, reactive, watch, watchEffect } from 'vue';

  const scope = effectScope();

  const state = reactive({ count: 0 });
  scope.run(() => {
    // 这些 effect 都会被 scope 管理
    watch(
      () => state.count,
      (count) => {
        console.log('effectScope管理的watch监听:', count);
      }
    );
    watchEffect(() => {
      console.log('effectScope管理的watchEffect监听', state.count);
    });
  });

  // 停止所有 effect,会将上面的watch和watchEffect都停止。
  const handleStop = () => {
    scope.stop();
  };

// 自己调用watch监听
  const singleWatch = watch(
    () => state.count,
    (count) => {
      console.log('单个监听watch:', count);
    }
  );
  // 停止自己创建的watch监听
  const handleStopWatch = () => {
    singleWatch();
  };
</script>

<template>
  <a-button @click="state.count++">count:{{ state.count }}</a-button>
  <a-button @click="handleStop">停止</a-button>
  <a-button @click="handleStopWatch">停止 watch</a-button>
</template>

<style scoped lang="less"></style>

自动清理示例

使用onScopeDispose实现组件卸载时自动,自动清理effectScope

js 复制代码
import { effectScope, onScopeDispose } from 'vue'

export default {
  setup() {
    const scope = effectScope()
    
    scope.run(() => {
      // 所有响应式逻辑
      const state = reactive({ /*...*/ })
      watch(/*...*/)
      computed(/*...*/)
    })
    
    onScopeDispose(() => {
      scope.stop() // 组件卸载时自动清理
    })
    
    return {}
  }
}
相关推荐
一涯1 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调8 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab8 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined210 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck33 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
用户7579419949701 小时前
基于JavaScript的简易Git
javascript