深入理解Vue3里的EffectScope

Vue 3.2 版本引入了新的 Effect scope API，使用 effectScope 创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。使用 getCurrentScope 返回当前活跃的 effect 作用域。使用 onScopeDispose 在当前活跃的 effect 作用域上注册一个处理回调函数。当相关的 effect 作用域停止时会调用这个回调函数。

const scope = effectScope()

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// 处理掉当前作用域内的所有 effect
scope.stop()

在 Vue 的 setup 中，响应会在开始初始化的时候被收集，在实例被卸载的时候，响应就会自动的被取消追踪了，这时一个很方便的特性。

但是，当我们在组件外使用或者编写一个独立的包时，这会变得非常麻烦。当在单独的文件中，我们该如何停止 computed & watch 的响应式依赖呢？

示例代码，参考链接

const disposables = []

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

disposables.push(() => stop(doubled.effect))

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

disposables.push(stopWatch1)

const stopWatch2 = watch(doubled, () => {
  console.log(doubled.value)
})

disposables.push(stopWatch2)

上面的代码中，我们写了一共三个 computed & watch 的响应式依赖，把这些响应式依赖的 stopHandle 都存到一个数组中，意思是我们需要维护这个数组，这样将来在需要的时候，就可以像下面这样，直接把所有的响应都停掉：

disposables.forEach((f) => f())
disposables = []

尤其是当我们有一些长而复杂的组合式函数代码时，手动收集所有响应式依赖是很费力的。也很容易忘记收集它们（或者您无法访问在组合式函数中创建的响应式依赖），这可能会导致内存泄漏和意外行为。

该特性就是试图将组件的 setup() 响应式依赖收集和处理功能抽象为更通用的 API，该 API 可以在组件模型之外复用。

它还提供了从组件的 setup() 范围或用户定义的范围创建“分离” effects 的功能。

这个功能解决了什么问题？

// global shared reactive state
let foo

function useFoo() {
  if (!foo) { // lazy initialization
      foo = ref()
      watch(foo, ...) // <- this is stopped when component that created it is unmounted
      // make some http calls etc
  }
  return foo
}

component1 = {
    setup() {
        useFoo() // lazily initialize
    }
}

component2 = {
    setup() {
        useFoo() // lazily initialize
    }
}

我有一个在多个组件之间共享功能的组合式函数，问题是当卸载第一个调用的组件时 component1 停止 useFoo 响应式依赖。因为如果不停止对全局变量 foo 又有影响，其他 component2 组件调用有问题。

到此这篇关于深入理解Vue3里的EffectScope的文章就介绍到这了,更多相关Vue3 EffectScope内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题. 经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址. 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了. 解决方法: 地址错误了,那就

  • vue-cli3.0 特性解读

    vue-cli3.0 特性解读

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines)

  • vue3.0中setup使用(两种用法)

    一.setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1.setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 2.

  • 关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题

    关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题

    首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后A页面,跳转到B页面之前,需要直接调用store中存储数据的方法,全局可以使用 诸如以上所示,该问题,百度了好久,多亏群里大佬. vue使用less报错的解决方法 安装less less-loader cnpm install less less-loader --save-dev app.vue是所有XXX.vue文件的根文件 所以webapp,的底部通常是在这里配置 h5的新增 <header>标题</hea

  • 10分钟上手vue-cli 3.0 入门介绍

    环境安装 全新版本的脚手架.逼格非常高. 记住这个名字 @vue/cli ,对就是这个 你npm 或者yarn 安装就行了,先保证全局环境有它. npm install -g @vue/cli yarn add global @vue/cli 创建项目 这里对比下以前2.X之前的版本 ,新版本把插件以及模板等 移植到命令行界面了. 旧版 创建命令 2.x vue init <template-name> <project-name> 3.x vue create <proje

  • vue中添加mp3音频文件的方法

    有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法: 方法一.将音频文件放置在static目录中,然后进行调用,如下所示 <audio class="success" src="/static/audios/do_wrong.mp3"> </audio> 以上这种方式就能够解决这个问题了. 方法二.给项目配置mp3格式的解析器 1.在webpack.base

  • Vue3中SetUp函数的参数props、context详解

    Vue3中SetUp函数的参数props、context详解

    1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接收. 包含配置声明并传入的所有的属性的对象 也就是说:如果你想通过props的方式输出父组件传递给子组件的值. 你需要使用props进行接收配置.即props:{......} 如果你未通过Props进行接受配置,则输出的值是undefined <template> <div class=&

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • 深入理解Vue3里的EffectScope

    Vue 3.2 版本引入了新的 Effect scope API,使用 effectScope 创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和侦听器),这样捕获到的副作用可以一起处理.使用 getCurrentScope 返回当前活跃的 effect 作用域.使用 onScopeDispose 在当前活跃的 effect 作用域上注册一个处理回调函数.当相关的 effect 作用域停止时会调用这个回调函数. const scope = effectScope()

  • 理解HashSet里为什么value不是null

    理解HashSet里为什么value不是null

    最近面试,遇到一些关于 HashSet 的不寻常的八股 HashSet底层的value为啥不是一个 null呢,效率不是更高,还省得创建对象了? 那我们先来看下,这个 value 何时会被用到呢? HashSet#add 直接调用的HashMap#put 若HashMap#put: 成功,则返回null 失败,说明key已存在,就返回该key的value 综上,若底层hashmap的value维护的是null,则 HashMap#put 成功或失败都会返回null,则 HashSet#add 每

  • 深入理解Javascript里的依赖注入

    迟早你需要用到其他开发人员的抽象成果--即你依靠别人的代码.我喜欢依赖自由(无依赖)的模块,但那是难以实现的.甚至你创建的那些漂亮的黑盒子组件也或多或少会依赖一些东西.这正是依赖注入大显身手的之处.现在有效地管理依赖的能力是绝对必要的.本文总结了我对问题探索和一些的解决方案. 一.目标设想我们有两个模块.第一个是负责Ajax请求服务(service),第二个是路由(router). 复制代码 代码如下: var service = function() {    return { name: '

  • vue3中的render函数里定义插槽和使用插槽

    目录 render函数里定义插槽和使用插槽 定义插槽 定义有插槽的组件使用插槽 vue3 render函数小变动 render函数的参数 render函数签名 VNode属性格式 render函数里定义插槽和使用插槽 vue3中this.slots和vue2的区别 vue3:this.slots是一个{ [name: string]: (…args: any[]) => Array | undefined }的对象,每个具名插槽的内容都要通过函数调用.如v-slot:foo插槽分发的内容通过th

  • 一文搞懂Vue3中toRef和toRefs函数的使用

    目录 toRef 函数 toRef 函数使用 ref 函数验证 toRefs 函数 toRefs 函数使用 总结 上一篇博文介绍了vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用. toRef 函数 通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢? 首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数

  • Vue3生命周期Hooks原理与调度器Scheduler关系

    目录 写在最前:本文章的目标 Vue3生命周期的实现原理 生命周期类型 各个生命周期Hooks函数的创建 创建生命周期函数createHook injectHook函数 生命周期Hooks的调用 Vue3调度器(Scheduler)原理 Vue父子组件的生命周期的执行顺序 父子组件的执行顺序 父子组件生命周期的执行顺序 组件卸载的时候,是在卸载些什么呢? 组件更新的调度器里的队列任务的失效与删除的区别 父子组件执行顺序与调度器的关系 Hooks的本质 最后 写在最前:本文章的目标 Vue3的生命

  • 手摸手教你实现Vue3 Reactivity

    手摸手教你实现Vue3 Reactivity

    目录 前言 开始 小小思考 代码实现 模仿 实现track 实现trigger 实现observe 实现computed 前言 Vue3的响应式基于Proxy,对比Vue2中使用的Object.definedProperty的方式,使用Proxy在新增的对象以及数组的拦截上都有很好的支持. Vue3的响应式是一个独立的系统,可以抽离出来使用,那他到底是如何实现的呢? 都知道有Getter和Setter,那Getter和Setter中分别都进行了哪些主要操作才能实现响应式呢? 哼哼,带着这些问题一

  • vue3中reactive不能直接赋值的解决方案

    目录 vue3 reactive不能直接赋值 方法 vue3 reactive赋值不响应 (1)多嵌套一层 (2)使用ref (3)用obeject.assign vue3 reactive不能直接赋值 最近比较忙,都没什么时间学习了. 在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同.在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性.然后赋值是我们经常进行的操作,那么该怎么解决呢? 方法 1. 改为ref定义 const arr=

  • vue3 关于reactive的重置问题及解决

    vue3 关于reactive的重置问题及解决

    目录 关于reactive的重置问题 理解vue3中的reactive 1.什么是reactive? 2.reactive注意点 关于reactive的重置问题 在vue3的reactive的使用, 有时候需要对里面的数据进行清空处理, 下面推荐一个方法 假如有一个info的reactive的数据 const info = reactive<{ name: string; age: string; gender: string }>({   name: "1",   age

  • 如何在vue3中同时使用tsx与setup语法糖

    如何在vue3中同时使用tsx与setup语法糖

    目录 前言 Tsx与setup语法糖的优势 遇到的问题 最后 前言 想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法. Tsx与setup语法糖的优势 目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持

随机推荐