返回顶部
首页 > 资讯 > 精选 >Vue3 effectScope API实现原理是什么
  • 792
分享到

Vue3 effectScope API实现原理是什么

2023-07-05 17:07:32 792人浏览 独家记忆
摘要

本篇内容介绍了“vue3 effectScope api实现原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Vue3新增e

本篇内容介绍了“vue3 effectScope api实现原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

Vue3新增effectScope相关的API

其官方的描述是创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和侦听器),这样捕获到的副作用可以一起处理。并给出了示例:

const scope = effectScope()scope.run(() => {  const doubled = computed(() => counter.value * 2)  watch(doubled, () => console.log(doubled.value))  watchEffect(() => console.log('Count: ', doubled.value))})// 处理掉当前作用域内的所有 effectscope.stop()

我们就从这个示例入手看看具体的源码实现:

effectScope

// packages/Reactivity/src/effectScope.tsexport function effectScope(detached?: boolean) {  // 返回EffectScope实例  return new EffectScope(detached)}

EffectScope

export class EffectScope {    private _active = true    effects: ReactiveEffect[] = []    cleanups: (() => void)[] = []    parent: EffectScope | undefined    scopes: EffectScope[] | undefined    private index: number | undefined  constructor(public detached = false) {    // 记录当前scope为parent scope    this.parent = activeEffectScope    if (!detached && activeEffectScope) {      this.index =        (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(          this        ) - 1    }  }  get active() {    return this._active  }  run<T>(fn: () => T): T | undefined {    if (this._active) {      const currentEffectScope = activeEffectScope      try {        activeEffectScope = this        return fn()      } finally {        activeEffectScope = currentEffectScope      }    } else if (__DEV__) {      warn(`cannot run an inactive effect scope.`)    }  }    on() {    activeEffectScope = this  }    off() {    activeEffectScope = this.parent  }  // stop方法  stop(fromParent?: boolean) {    if (this._active) {      let i, l      // stop effects      for (i = 0, l = this.effects.length; i < l; i++) {        this.effects[i].stop()      }      // 执行所有的cleanups      for (i = 0, l = this.cleanups.length; i < l; i++) {        this.cleanups[i]()      }      // 递归停止所有的子作用域      if (this.scopes) {        for (i = 0, l = this.scopes.length; i < l; i++) {          this.scopes[i].stop(true)        }      }      // nested scope, dereference from parent to avoid memory leaks      if (!this.detached && this.parent && !fromParent) {        // optimized O(1) removal        const last = this.parent.scopes!.pop()        if (last && last !== this) {          this.parent.scopes![this.index!] = last          last.index = this.index!        }      }      this.parent = undefined      this._active = false    }  }}

在执行scope.run的时候会将this赋值到全局的activeEffectScope变量,然后执行传入函数。对于computed、watch、watchEffect(watchEffect是调用doWatch实现的,与watch实现响应式绑定的方式相同)这些API都会创建ReactiveEffect实例来建立响应式关系,而收集对应的响应式副作用就发生在ReactiveEffect创建的时候,我们来看一下ReactiveEffect的构造函数:

// ReactiveEffect的构造函数constructor(  public fn: () => T,  public scheduler: EffectScheduler | null = null,  scope?: EffectScope) {  // effect实例默认会被记录到指定scope中  // 如果没有指定scope则会记录到全局activeEffectScope中  recordEffectScope(this, scope)}// recordEffectScope实现export function recordEffectScope(  effect: ReactiveEffect,  // scope默认值为activeEffectScope  scope: EffectScope | undefined = activeEffectScope) {  if (scope && scope.active) {    scope.effects.push(effect)  }}

可以看到如果我们没有传入scope参数,那么在执行recordEffectScope时就会有一个默认的参数为activeEffectScope,这个值不正是我们scope.run的时候赋值的吗!所以新创建的effect会被放到activeEffectScope.effects中,这就是响应式副作用的收集过程。
那么对于一起处理就比较简单了,只需要处理scope.effects即可

组件的scope

日常开发中其实并不需要我们关心组件副作用的收集和清除,因为这些操作是已经内置好的,我们来看一下源码中是怎么做的

组件实例中的scope

在组件实例创建的时候就已经new了一个属于自已的scope对象了:

const instance: ComponentInternalInstance = {  ...  // 初始化scope  scope: new EffectScope(true ),  ...}

在我们执行setup之前,会调用setCurrentInstance,他会调用instance.scope.on,那么就会将activeEffectScope赋值为instance.scope,那么在setup中注册的computed、watch等就都会被收集到instance.scope.effects

function setupStatefulComponent(  instance: ComponentInternalInstance,  isSSR: boolean) {  // 组件对象  const Component = instance.type as ComponentOptions  ...  // 2. call setup()  const { setup } = Component  if (setup) {    // 创建setupContext    const setupContext = (instance.setupContext =      // setup参数个数判断 大于一个参数创建setupContext      setup.length > 1 ? createSetupContext(instance) : null)    // instance赋值给currentInstance    // 设置当前实例为instance 为了在setup中可以通过getCurrentInstance获取到当前实例    // 同时开启instance.scope.on()    setCurrentInstance(instance)    // 暂停tracking 暂停收集副作用函数    pauseTracking()    // 执行setup    const setupResult = callWithErrorHandling(      setup,      instance,      ErrorCodes.SETUP_FUNCTION,      // setup参数      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]    )    // 重新开启副作用收集    resetTracking()    // currentInstance置为空     // activeEffectScope赋值为instance.scope.parent    // 同时instance.scope.off()    unsetCurrentInstance()    ...  } else {    finishComponentSetup(instance, isSSR)  }}

对于选项式API的收集是同样的操作:

// support for 2.x optionsif (__FEATURE_OPTIONS_API__ && !(__COMPAT__ && skipOptions)) {  setCurrentInstance(instance)  pauseTracking()  // 处理options API  applyOptions(instance)  resetTracking()  unsetCurrentInstance()}

完成了收集那么对于清理就只需要在组件卸载的时候执行stop方法即可:

// packages/runtime-core/src/renderer.tsconst unmountComponent = (  instance: ComponentInternalInstance,  parentSuspense: SuspenseBoundary | null,  doRemove?: boolean) => {  if (__DEV__ && instance.type.__hmrId) {    unreGISterHMR(instance)  }  const { bum, scope, update, subTree, um } = instance  ...  // stop effects in component scope  // 副作用清除  scope.stop()  ...}

“Vue3 effectScope API实现原理是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: Vue3 effectScope API实现原理是什么

本文链接: https://lsjlt.com/news/354082.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue3 effectScope API实现原理是什么
    本篇内容介绍了“Vue3 effectScope API实现原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue3新增e...
    99+
    2023-07-05
  • Vue2实现composition API的原理是什么
    本篇内容主要讲解“Vue2实现composition API的原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue2实现composition API的原理是什么”吧!如何使用//&n...
    99+
    2023-07-05
  • Vue3中Provide/Inject的实现原理是什么
    本文小编为大家详细介绍“Vue3中Provide/Inject的实现原理是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue3中Provide/Inject的实现原理是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来...
    99+
    2023-06-29
  • Vue3插槽Slot的实现原理是什么
    这篇文章主要介绍了Vue3插槽Slot的实现原理是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3插槽Slot的实现原理是什么文章都会有所收获,下面我们一起来看看吧。Vue官方对插槽的定义Vue 实现...
    99+
    2023-07-02
  • Vue3侦听器的实现原理是什么
    侦听响应式对象前面我们聊到计算属性,它可以自动计算并缓存响应式数据的值。而如果我们仅需要在响应式数据变化时,执行一些预设的操作,就可以使用watch侦听器。我们还是先来实现一个最简单的例子,然后来一点一点扩充它。const data = {...
    99+
    2023-05-16
    Vue3
  • Vue3中Provide和Inject的实现原理是什么
    这篇文章主要介绍了Vue3中Provide和Inject的实现原理是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中Provide和Inject的实现原理是什么文章都会有所收获,下面我们一起来看看吧...
    99+
    2023-06-29
  • vue3响应式原理和api编写的方法是什么
    这篇文章主要讲解了“vue3响应式原理和api编写的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3响应式原理和api编写的方法是什么”吧!前言vue3响应式原理加api编写...
    99+
    2023-06-22
  • Python API 数组同步的实现原理是什么?
    Python 是一种面向对象、解释型的高级编程语言。它具有简洁、易读、易维护的特性,广泛应用于各种领域,如 Web 开发、数据科学、人工智能等。在 Python 中,API 数组同步是一个重要的概念,本文将为您介绍其实现原理。 API 数...
    99+
    2023-08-17
    api 数组 同步
  • Vue3 Reactive响应式原理是什么
    一、怎么实现变量变化怎么实现变量变化,相关依赖的结果也跟着变化 当原本price=5变为price=20后total应该变为40,但是实际total并不会改变。 解决办法可以这样,当变量改变了,重新计算一次,那么结果就会改变为最新的结果。如...
    99+
    2023-05-21
    Vue3 reactive
  • Vue3的响应式原理是什么
    ProxyProxy这个核心API被Vue3的响应式原理所依赖,利用Proxy可以拦截一些对象操作。const obj = { a: 1 }; const p = new Proxy(obj, { get(target, propert...
    99+
    2023-05-24
    Vue3
  • VB.NET调用API原理是什么
    这篇文章将为大家详细讲解有关VB.NET调用API原理是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.VB.NET调用APIAPI全称为Application Programming Interf...
    99+
    2023-06-17
  • Vue3中Teleport 组件的原理是什么
    这篇文章将为大家详细讲解有关Vue3中Teleport 组件的原理是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。使用场景业务开发的过程中,我们经常会封...
    99+
    2024-04-02
  • Vue2/Vue3的响应式原理是什么
    本篇内容主要讲解“Vue2/Vue3的响应式原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue2/Vue3的响应式原理是什么”吧!在讲解之前,我们先了解一下数据响应式是什么?所谓数据...
    99+
    2023-07-05
  • Vue3 KeepAlive实现原理解析
    目录思路代码解析setuprenderonActivated 和 onDeactived调用思路 首先我们知道 KeepAlive 是一个内置组件,那封装一个组件对于大家来说应该不会...
    99+
    2024-04-02
  • MongoDB中实现原理是什么
    今天就跟大家聊聊有关MongoDB中实现原理是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。主流程MyCAT Server 接收 MySQL C...
    99+
    2024-04-02
  • CAS的实现原理是什么
    本篇内容主要讲解“CAS的实现原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CAS的实现原理是什么”吧!悲观锁与乐观锁悲观锁总是假设最坏的情况,线程a...
    99+
    2024-04-02
  • LongAdder的实现原理是什么
    LongAdder的实现原理是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。AtomicLong的实现原理图:LongAdder是JDK8...
    99+
    2024-04-02
  • SSH的实现原理是什么
    本篇内容介绍了“SSH的实现原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!SSH是一种协议标准,它的主要目的是实现远程登录和提供安...
    99+
    2023-06-17
  • CountDownLatch的实现原理是什么
    这篇文章主要讲解了“CountDownLatch的实现原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CountDownLatch的实现原理是什么”吧! 前言CountDo...
    99+
    2023-06-15
  • Linux的实现原理是什么
    本篇内容主要讲解“Linux的实现原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Linux的实现原理是什么”吧!1 引言90年代以来,数控技术发展的一个重要趋势是数控系统的开放化。目前...
    99+
    2023-06-16
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作