【Vue3 源码解析】nextTick

nextTick 是 Vue 3 中用于异步执行回调函数的函数,它会将回调函数延迟到下一个微任务队列中执行。其中,Vue 更新 DOM 是异步的。下面是对 nextTick 函数的详细解释:

export function nextTick<T = void, R = void>(this: T,fn?: (this: T) => R
): Promise<Awaited<R>> {const p = currentFlushPromise || resolvedPromisereturn fn ? p.then(this ? fn.bind(this) : fn) : p
}
let currentFlushPromise: Promise<void> | null = null
const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>

解释如下:

  1. 函数签名:

    • nextTick<T = void, R = void>(this: T, fn?: (this: T) => R): Promise<Awaited<R>>:这是 nextTick 函数的类型签名。它接受以下参数:
      • this:不是参数,是ts中的一个语法,给 this 定义类型。给用于绑定回调函数中的 this 上下文,可以省略。
      • fn:要异步执行的回调函数,是一个函数,可以省略。
    • 函数返回一个 PromisePromise 的泛型为 Awaited<R>,表示回调函数执行后的返回值。
  2. 实现逻辑:

    • nextTick 函数首先定义了一个 Promise 对象 p,这个 Promise 对象被初始化为 currentFlushPromiseresolvedPromise,取决于当前是否处于刷新队列(flush)的过程中。currentFlushPromise 是一个全局变量,用于表示当前正在刷新队列,如果不在刷新队列中,则使用 resolvedPromise,它是一个已经 resolved(已解决)的 Promise

    • 接着,函数检查是否传入了回调函数 fn。如果传入了 fn,则会返回一个 Promise.then(),去执行一个微任务,这个 Promise 在微任务队列中执行回调函数(如果使用 await nextTick() 也相当于执行一个微任务)。如果没有传入 fn,则直接返回 p,这意味着如果没有回调函数,会返回一个已经 resolved 的 Promise

    • 在返回 Promise 的过程中,函数会根据传入的 this 上下文(如果有的话),使用 fn.bind(this) 来绑定回调函数中的 this,确保回调函数在执行时具有正确的上下文。

  3. 总结:

    • nextTick 函数用于将回调函数异步执行,将回调函数放入下一个微任务队列中。它的核心逻辑是使用 Promise 来管理回调函数的异步执行,也就是把我们的代码放到一个 Promise 中去执行微任务,把我们的代码变成异步的。
    • 如果不传入回调函数,将返回一个已经 resolved Promise。这个函数在 Vue 3 中用于在数据更新后执行回调函数,确保数据更新后的 DOM 操作在下一个微任务中执行,以提高性能和响应速度。

Vue 更新 DOM 是异步的,然后我们看一下队列是怎么更新的。

  // job 是组件实例上的 update 方法,生成 instance.update 函数
export function queueJob(job: SchedulerJob) {// the dedupe search uses the startIndex argument of Array.includes()// by default the search index includes the current job that is being run// so it cannot recursively trigger itself again.// if the job is a watch() callback, the search will start with a +1 index to// allow it recursively trigger itself - it is the user's responsibility to// ensure it doesn't end up in an infinite loop.// 检查任务队列是否为空,或者当前任务是否已经在任务队列中if (!queue.length || // 如果队列为空,直接将任务添加到队列中!queue.includes(job,isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) {// 如果任务的 id 为 null,直接将任务添加到队列末尾if (job.id == null) {queue.push(job)} else {// 如果任务的 id 不为 null,根据任务的 id 寻找插入位置// 将任务插入到合适的位置,以保持任务按照 id 的顺序执行queue.splice(findInsertionIndex(job.id), 0, job)}// 触发任务刷新,开始执行任务队列中的任务queueFlush()}
}
const queue: SchedulerJob[] = []

这段代码是 Vue 3 内部用于调度和执行任务的关键部分,主要涉及到任务队列的管理和触发任务执行的逻辑。

解释如下:

  1. queueJob 函数用于将一个任务 job 添加到任务队列 queue 中,并触发任务刷新(queueFlush)。

  2. 在添加任务之前,首先会进行一些条件判断:

    • 首先检查任务队列是否为空,如果为空,直接将任务添加到队列中,不需要进行后续的检查。
    • 然后,使用 queue.includes 方法检查当前任务 job 是否已经在任务队列中。这里的检查是为了避免任务的重复添加。如果任务队列中已经包含了当前任务,就不再添加。
  3. 如果当前任务 job 通过了上述检查条件,就可以将它添加到任务队列中:

    • 如果任务的 id 属性为 null,表示没有指定任务的唯一标识,直接将任务添加到队列末尾(queue.push(job))。
    • 如果任务的 id 属性不为 null,表示指定了任务的唯一标识,需要根据该标识找到合适的插入位置,以保持任务队列中的任务按照 id 的顺序执行(按照 job id 自增的顺序排列)。这时会调用 findInsertionIndex(job.id) 来找到插入位置,然后使用 splice 方法插入任务到指定位置。
  4. 最后,调用 queueFlush 函数,触发任务刷新。任务刷新会开始执行任务队列中的任务。

总结:queueJob 函数用于添加任务到任务队列中,并确保任务不会重复添加。它也负责触发任务刷新,以开始执行任务队列中的任务。这是 Vue 3 中任务调度的核心逻辑之一,用于管理异步任务的执行顺序。

以上的 idjob 都存在于 getCurrentInstance 中,因此可以打印看一下:

import { reactive, ref, nextTick, getCurrentInstance, watch } from 'vue'
const instance = getCurrentInstance()
console.log(instance);

在这里插入图片描述

返回一个对象,源码里面的 id 就是这里的 uid ,里面的 job 函数就是这里的 update 函数。也就是说:const update = (instance.update = () => effect.run()) , update.id = instance.uid。所以,源码就是获取了这两者,放入 queue 队列。

function queueFlush() {if (!isFlushing && !isFlushPending) {// 如果没有正在刷新任务队列(isFlushing 为 false)// 且没有挂起的刷新请求(isFlushPending 为 false)// 设置 isFlushPending 为 true,表示有一个刷新请求挂起isFlushPending = true// 使用 resolvedPromise.then(flushJobs) 来延迟执行 flushJobs 函数// 这样可以让当前的 JavaScript 执行栈完成后再执行刷新操作currentFlushPromise = resolvedPromise.then(flushJobs)}
}

这段代码是 Vue 3 内部用于触发任务刷新(flushJobs)的逻辑。它确保在没有正在刷新任务队列(isFlushingfalse)且没有挂起的刷新请求(isFlushPendingfalse)时才会触发任务刷新。

解释如下:

  1. queueFlush 函数用于触发任务刷新,但它不会立即执行刷新操作,而是通过 Promise 的方式进行延迟执行。

  2. 在执行触发刷新前,首先进行两个条件的检查:

    • isFlushingfalse:表示没有正在刷新任务队列,确保不会同时执行多次刷新。
    • isFlushPendingfalse:表示没有挂起的刷新请求,确保不会重复触发刷新。
  3. 如果上述两个条件都满足,就会执行以下操作:

    • isFlushPending 设置为 true,表示有一个刷新请求挂起。
    • 创建一个 Promise 对象 currentFlushPromise,使用 resolvedPromise 来生成一个已经 resolved(已完成)状态的 Promise,并通过 .then 方法将 flushJobs 函数作为回调传递进去。这样,flushJobs 函数会在下一个微任务中执行。
  4. currentFlushPromise 这个 Promise 被 resolved 时,会触发 flushJobs 函数的执行,从而实际执行任务刷新的操作。

总结:queueFlush 函数用于触发任务刷新,但会确保在没有正在刷新任务队列的情况下,且没有挂起的刷新请求时才触发。核心就是通过将刷新操作包装成 Promise,把 flushJobs 放入下一个微任务中执行,以确保任务刷新是异步的,不会阻塞当前 JavaScript 执行栈。这种设计有助于保持 Vue 3 的响应性和性能。

function flushJobs(seen?: CountMap) {// 标志当前没有挂起的刷新请求isFlushPending = false// 标志当前正在执行刷新操作isFlushing = trueif (__DEV__) {// 如果是开发环境,创建一个用于追踪任务数量的 Map 对象seen = seen || new Map()}// Sort queue before flush.// This ensures that:// 1. Components are updated from parent to child.// 2. If a component is unmounted during a parent component's update,//    its update can be skipped.// 在执行刷新前,对任务队列进行排序,以确保以下两点:// 1. 组件更新的顺序是从父组件到子组件的(因为父组件总是在子组件之前创建,所以其渲染效果具有较小的优先级编号)。// 2. 如果在父组件的更新期间卸载了子组件,可以跳过子组件的更新。queue.sort(comparator)// 条件使用 checkRecursiveUpdate 必须在 try...catch 块外部决定// 因为 Rollup 默认会在 try...catch 块内部取消树摇,这可能导致所有警告代码都无法被摇掉。// 尽管它们最终会被像 terser 这样的压缩器摇掉,但某些压缩器可能无法做到这一点(例如 https://github.com/evanw/esbuild/issues/1610)。const check = __DEV__? (job: SchedulerJob) => checkRecursiveUpdates(seen!, job): NOOPtry {for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {const job = queue[flushIndex]if (job && job.active !== false) {if (__DEV__ && check(job)) {continue}// 执行任务,并使用 callWithErrorHandling 包装,以捕获可能的错误callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)}}} finally {// 清空 flushIndex,重置任务队列flushIndex = 0queue.length = 0// 执行在刷新后的回调函数flushPostFlushCbs(seen)// 标志当前刷新结束isFlushing = false// 将当前刷新的 Promise 置为 nullcurrentFlushPromise = null// 如果任务队列中仍有任务或者有挂起的 postFlush 回调// 继续执行刷新操作,直到任务队列为空if (queue.length || pendingPostFlushCbs.length) {flushJobs(seen)}}
}

这段代码是 Vue 3 中用于执行任务刷新的关键逻辑,它会在 queueFlush 函数触发时执行。

解释如下:

  1. flushJobs 函数用于执行任务刷新,它在 queueFlush 函数触发后被调用。

  2. 首先,它会将 isFlushPending 置为 false,表示当前没有挂起的刷新请求,然后将 isFlushing 置为 true,表示当前正在执行刷新操作。

  3. 在开发环境中,创建一个用于追踪任务数量的 seen Map 对象。

  4. 对任务队列 queue 进行排序,确保组件的更新按从父到子的顺序执行,同时也考虑了组件在父组件更新期间被卸载的情况。

  5. 使用 check 函数来检查是否存在递归更新的情况。这个检查在开发环境下才会执行。

  6. 进入循环,依次处理任务队列 queue中的任务。如果任务是激活状态且没有递归更新的情况,就执行该任务。callWithErrorHandling 函数用于包装任务的执行,以捕获可能的错误,其实就是包装了 job 函数,并且会把错误抛出。

  7. finally 块中,清空 flushIndex,重置任务队列 queue,确保任务只会执行一次。

  8. 执行在刷新后的回调函数 flushPostFlushCbs,这些回调函数通常用于清理或执行一些不同的调度政策。

  9. 最后,将 isFlushing 置为 false,表示刷新操作结束,将当前刷新的 Promise currentFlushPromise 置为 null

  10. 如果任务队列 queue 中仍有任务,或者有挂起的 postFlush 回调函数,就继续执行刷新操作,直到任务队列为空。

总结:flushJobs 函数是 Vue 3 中执行任务刷新的核心逻辑,它会在 queueFlush 触发后执行,负责遍历并执行任务队列中的任务,确保组件更新按正确的顺序执行,并处理递归更新的情况。这个函数的设计是为了保持 Vue 3 的响应性和性能。

比如我们可以在父组件中嵌套一个子组件,让父组件和子组件都输出 getCurrentInstance(上面提到过~)。可以看到 uid 的顺序就是先创建父组件,再创建子组件。

在这里插入图片描述

至于上面说的 flushPostFlushCbs 函数,其实我们在学watch的时候已经接触过了。

watch((xxx)=> {},{flush: 'post'
})

这里的 flush: 'post' 其实就是调用了flushPostFlushCbs 函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/89282.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

某市住房公积金管理中心领导莅临创邻科技考察指导

近日&#xff0c;某市住房公积金管理中心&#xff08;以下简称“公积金中心”&#xff09;领导带队&#xff0c;一行6人莅临浙江创邻科技调研指导&#xff0c;创邻科技CEO张晨、COO吴菁、CTO周研作为代表接待来访并举行会谈。 该公积金中心一行此次莅临创邻科技考察调研&#…

【C#】Redis在net core下使用教程

系列文章 文章目录 系列文章前言一、Redis 简介1.1 Redis 优势1.2 Redis与其他key-value存储有什么不同&#xff1f; 二、Redis安装步骤2.1 下载链接2.2 安装测试 三、Redis修改帐户密码四、Redis写成Windows服务五、.net core - 使用CSRedisCore操作redis 前言 官方教程&…

ESP32设备通信-Mesh网络通信

Mesh网络通信 文章目录 Mesh网络通信1、ESP-MESH协议介绍2、ESP32与ESP8266组成ESP-Mesh网络应用介绍3、软件准备4、硬件准备5、代码实现在本文中,我们将介绍使用 painlessMesh 库和 ESP32/ESP8266 NodeMCU 使用 ESP-MESH 网络。 本文将重点介绍 Espressif 的 ESP-MESH 网络协…

【SQL】S0 系列博文大纲

系列博文大纲 SQL 学习环境建议系列博文相关书籍系列博文大纲阶段进展 SQL 学习环境建议 对于 SQL 语言的学习&#xff0c;博主本地使用&#xff1a;MySQL DataGrip&#xff1b; MySQL 提供本地数据库服务&#xff1b; DataGrip IDE&#xff0c;承担编程运行测试任务&#xf…

25814-2010 三聚氯氰 阅读笔记

声明 本文是学习GB-T 25814-2010 三聚氯氰. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了三聚氯氰的要求、采样、试验方法、检验规则以及标志、标签、包装、运输、贮存、安全、 安全技术说明书。 本标准适用于三聚氯氰的产品…

【go】字符串切片与字符串出入数据库转化

文章目录 需求代码入库出库 需求 将请求数据存入数据库与从数据库读取数据返回在出库不使用反序列化情况下 请求结构体 type NoticegroupsCreateReq struct {Name string json:"name" binding:"required"UserIds []string json:"user_ids…

ARM/X86工控机在轨道交通交通管理系统的应用(4)

交通管理系统 信迈XM-3000系列专为道路监控应用而设计。随着城市化的发展&#xff0c;道路车辆数目与日俱增&#xff0c;而道路监控对于时刻保障城市的安全是非常必要的。由于性能强大并支持宽温度工作&#xff0c;XM-3000系列成为交通管理系统应用的理想选择。 系统架构 交通…

服务网关Gateway_微服务中的应用

没有服务网关 问题&#xff1a; 地址太多安全性管理问题 为什么要使用服务网关 网关是微服务架构中不可或缺的部分。使用网关后&#xff0c;客户端和微服务之间的网络结构如下。 注意&#xff1a; 网关统一向外部系统&#xff08;如访问者、服务&#xff09;提供REST API。在Sp…

常用螺栓标准、规格、用途汇总表

螺栓 1 常用螺栓标准、用途 常用螺栓标准、规格、用途见表1。 表1 常用螺栓标准、规格、用途汇总表 注&#xff1a;1.冷镦工艺生产的小六角头螺栓具有材料利用率高、生产效率高、机械性能高等优点,但由于头部尺寸较小, 不宜用于多次装拆、被联接件强度较低和易锈蚀等场合。 2.…

印章篆刻小程序商城的作用是什么

印章的需求度也有很高市场需求&#xff0c;处理办公印章外&#xff0c;还有艺术类的&#xff0c;而对爱好者来说&#xff0c;需要找到一家靠谱的品牌制作&#xff0c;包括材料、样式、内容等都有较高要求&#xff0c;线上可以接触到更多雕刻商家。 而对品牌来说&#xff0c;需…

Chrome获取RequestId

Chrome获取RequestId 参考&#xff1a;https://help.aliyun.com/zh/redis/how-do-i-obtain-the-id-of-a-request 在浏览器页面按下F12键&#xff0c;打开开发者工具页面&#xff1b; 在开发者工具页面&#xff0c;单击Network(网络)&#xff1b; 在playload(载荷)窗口中找到目…

Java-day18(网络编程)

网络编程 1.概述 Java提供跨平台的网络类库&#xff0c;可以实现无痛的网络连接&#xff0c;程序员面对的是一个统一的网络编程环境 网络编程的目的&#xff1a;直接或间接地通过网络协议与其他计算机进行通信 网络编程的两个主要问题&#xff1a; 1.如何准确定位网络上一台…

Blender 之创建一个简单的笔筒

文章目录 成品图实现步骤 你是不是想创建一个笔筒捏&#xff1f; follow me! 成品图 实现步骤 先添加一个柱体 选中柱体&#xff0c;然后按tab 进入编辑模式 切换到面模式 &#xff08;可以按主键盘的 3 键&#xff09; 分别选中上下面&#xff0c;鼠标右键&#xff0c;选…

Spring Boot 3.0:构建下一代Java应用的新方法

文章目录 Spring Boot 3.0&#xff1a;一览1. **模块化应用程序**2. **更强大的自动化工具**3. **更强大的安全性**4. **更好的性能和扩展性** 如何开始使用Spring Boot 3.01. 安装Spring Boot CLI2. 创建新项目3. 配置应用程序4. 编写业务逻辑5. 测试应用程序6. 构建和部署 结…

2023-09-27 LeetCode每日一题(餐厅过滤器)

2023-09-27每日一题 一、题目编号 1333. 餐厅过滤器二、题目链接 点击跳转到题目位置 三、题目描述 给你一个餐馆信息数组 restaurants&#xff0c;其中 restaurants[i] [idi, ratingi, veganFriendlyi, pricei, distancei]。你必须使用以下三个过滤器来过滤这些餐馆信息…

window.print()打印及出现的问题

<template><transition name"el-zoom-in-center"><div class"JNPF-preview-main"><div class"JNPF-common-page-header"><el-page-header back"goBack" :content"打印通知书" /><div clas…

游戏创业小知识:游戏运营的步骤和流程

游戏运营是确保游戏在持续运行中保持活跃和成功的过程。以下是游戏运营的一般步骤流程&#xff1a; 1.游戏发布前准备 游戏选择&#xff1a;了解并熟悉游戏的核心概念、目标受众和游戏玩法。 开发团队&#xff1a;组建开发团队&#xff0c;包括程序员、设计师、艺术家和声音设…

Oracle物化视图(Materialized View)

与Oracle普通视图仅存储查询定义不同&#xff0c;物化视图&#xff08;Materialized View&#xff09;会将查询结果"物化"并保存下来&#xff0c;这意味着物化视图会消耗存储空间&#xff0c;物化的数据需要一定的刷新策略才能和基表同步&#xff0c;在使用和管理上比…

系统集成|第十二章(笔记)

目录 第十二章 沟通管理12.1 沟通的基本概念12.2 主要过程12.2.1 规划沟通管理12.2.2 管理沟通12.2.3 控制沟通 12.3 常见问题 上篇&#xff1a;第十一章、项目人力资源管理 下篇&#xff1a;第十三章、干系人管理 第十二章 沟通管理 沟通管理在项目计划、执行、监控过程中具有…

【性能测试】jmeter连接数据库jdbc

一、下载第三方工具包驱动数据库   1. 因为JMeter本身没有提供链接数据库的功能&#xff0c;所以我们需要借助第三方的工具包来实现。 &#xff08;有这个jar包之后&#xff0c;jmeter可以发起jdbc请求&#xff0c;没有这个jar包&#xff0c;也有jdbc取样器&#xff0c;但不能…