剖析vue中nextTick源码

代码逻辑梳理:

  • callbacks 数组用于存储待执行的回调函数,waiting 变量用于标记是否有待执行的回调函数。

  • flushCallbacks 函数用于执行所有存储在 callbacks 数组中的回调函数,并在执行完成后将 waiting 设置为 false。

  • timer 函数根据环境选择合适的定时器来执行回调函数。优先选择 Promise 的微任务执行,如果不支持则尝试使用 MutationObserver,其次是 setImmediate,最后是默认的 setTimeout。

  • nextTick 函数用于将回调函数加入待执行队列,并触发执行。如果当前没有待执行的回调函数,则调用 timer 函数来触发执行,并标记有待执行的回调函数。

整体流程是将回调函数加入队列,通过选择合适的定时器来异步执行这些回调函数,保证它们在下一个微任务或宏任务中被执行

let callbacks = [] // 存储待执行的回调函数
let waiting = false // 标记是否有待执行的回调函数// 执行所有待执行的回调函数
function flushCallbacks() {callbacks.forEach((cb) => cb()) // 依次执行回调函数waiting = false // 标记执行完成
}// 根据环境选择合适的定时器执行回调函数
function timer(flushCallbacks) {let timerFn = () => {} // 默认空函数// 使用 Promiseif (typeof Promise !== 'undefined') {timerFn = () => {Promise.resolve().then(flushCallbacks) // 在微任务中执行回调函数}} else if (typeof MutationObserver !== 'undefined') { // 使用 MutationObserverlet textNode = document.createTextNode(1)let observe = new MutationObserver(flushCallbacks)observe.observe(textNode, {characterData: true})timerFn = () => {textNode.textContent = 3}} else if (typeof setImmediate !== 'undefined') { // 使用 setImmediatetimerFn = () => {setImmediate(flushCallbacks)}} else { // 默认使用 setTimeouttimerFn = () => {setTimeout(flushCallbacks, 0)}}timerFn()
}// 将回调函数加入待执行队列,并触发执行
function nextTick(cb) {callbacks.push(cb) // 将回调函数加入队列if (!waiting) {timer(flushCallbacks) // 触发执行回调函数waiting = true // 标记有待执行的回调函数}
}

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

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

相关文章

手把手实现AVL——二叉平衡搜索树

概述:本文介绍AVL树的实现,从零构建一颗AVL树,以及对应的插入、删除、旋转操作 什么是AVL树? AVL树是带有平衡条件的二叉查找树,二叉查找树又区别于二叉树:保证有序 这个平衡条件是每个节点的左右子树高…

[数据集][目标检测]红外人狗检测数据集VOC+YOLO格式185张2类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):185 标注数量(xml文件个数):185 标注数量(txt文件个数):185 标注类别…

Python数据分析常用函数

Python基础 数字处理函数 Python提供了用于数字处理的内置函数和内置模块(math),使用内置模块,需要先导入 import math。 内置函数math模块abs(-5)返回绝对值math.ceil(2.3)返回不小于x的最小整数divmod(9,4)返回商和余数math.floor(2.3)返回不大于x的…

第十三章:C# 封装

第十三章:C# 封装 封装是面向对象编程(OOP)的四大基本原则之一,它强调将数据和行为封装在对象内部,通过访问控制来保护数据的完整性和安全性。封装使得类的实现细节对外部隐藏,只暴露必要的接口,从而提高代码的可维护性和可重用性。 1. 封装的基本概念 封装的核心思想…

xrdp连接ubuntu

要通过xrdp连接Ubuntu,您需要在Ubuntu上安装xrdp服务,并且可能还需要配置一个桌面环境,如GNOME或XFCE。以下是安装和配置xrdp的步骤: 打开终端。 更新软件包列表: sudo apt update安装xrdp服务: sudo ap…

GLCM 特征和LBP特征提取

GLCM 特征 GLCM(灰度共生矩阵)特征用于描述图像中像素灰度级之间的空间关系,常用于纹理分析。GLCM特征通过统计图像中各个灰度级对之间的出现频率来描述图像的纹理特征。GLCM特征包括能量(ASM)、对比度(Co…

Host头攻击-禁止空主机头请求

1. 原理 空主机头请求:在某些情况下,HTTP请求可能没有包含Host头字段,或者Host头字段的值为空。这可能是由于客户端的错误配置、旧版本的HTTP客户端或恶意攻击导致的。安全风险:服务器在处理没有Host头字段或Host头字段为空的请求…

AutoCAD许可证服务器

在工程设计与仿真领域,AutoCAD软件已成为行业内的标准。然而,随着企业规模的不断扩大和项目复杂性的增加,AutoCAD许可证的管理和分配也变得越来越重要。本文将为您揭示AutoCAD许可证服务器的价值,以及如何通过合理的配置和管理实现…

linux定时清理docker日志脚本

Linux 定时清理 Docker 日志的脚本与配置指南 在使用 Docker 容器化应用程序时,日志文件可能会迅速增长,占用大量磁盘空间。为了保持系统的稳定性和高效运行,定期清理 Docker 日志文件是必要的。本文将介绍如何编写一个 Linux 脚本来清理 Docker 日志文件,并通过 cron 定时…

对于创建相关项目时,项目出现红色感叹号,且无jre环境显示,应该怎么解决?

首先,假设你已经下载好了相关你的jre环境,注意:如果你的jre不想用之前用的默认的话,你应该新建一个新的文件路径来存储你的新的jre环境下的项目文件。 先直接new->project->javaproject 点击next: 显示如下:&…

docker 目录overlay2

overlay2 是 Docker 存储驱动程序之一,它用于在 Linux 主机上管理 Docker 容器的文件系统层。overlay2 是 overlay 存储驱动程序的改进版本,提供了更好的性能和更多的特性。 当你在 Docker 中使用 overlay2 作为存储驱动程序时,你会在 Docke…

JavaScript表达式语句二

异常处理语句 异常标识一种非中正常得信息,它提示程序在运行过程中发生了意外或错误,然后JavaScript通过一定的方式把它暴露出来,这叫做抛出异常。抛出异常操作表示系统告诉我们当前程序出现了问题,JavaScript使用异常处理语句来…

以一道简单的例题计算灵敏性分析

在例1.1中,全部的变量包括:猪的重量w(磅),从现在到出售猪期间经历的时间t(天),t天内饲养猪的花费C(美元),猪的市场价格p(美元/磅),售出生猪所获得的收益R(美元),我们最终获得的净收益P(美元).这里还有一些其他的有关量,如猪的初始重量(200磅)…

Python 全栈体系【四阶】(五十四)

第五章 深度学习 十二、光学字符识别(OCR) 3. 文字识别技术 3.1 CRNNCTC(2015) CRNN(Convolutional Recurrent Neural Network)即卷积递归神经网络,是DCNN和RNN的组合,专门用于识别图像中的序列式对象。…

掌握常用的域信息收集的方法和域控制器攻击的方法(渗透课程)

域信息收集 【实验目的】 通过利用PsExec命令远程连接内网主机,分别收集查询域用户信息和域控制器相关信息,了解并掌握如何收集域内的信息命令。 【知识点】 域信息收集 【实验原理】 NET命令是功能强大的以命令行方式执行的工具。它包含了管理网络…

Nginx企业级负载均衡:技术详解系列(11)—— 实战一机多站部署技巧

你好,我是赵兴晨,97年文科程序员。 工作中你是否遇到过这种情况:公司业务拓展,新增一个域名,但服务器资源有限,只能跟原有的网站共用同一台Nginx服务器。 也就是说两个网站的域名都指向同一台Nginx服务器…

过滤器Filter

目录 概述 Filter快速入门 概述 概念:Filter过滤器,是JavaWeb三大组件(Servlet,Filter,Listener)之一。 过滤器可以把对资源的请求拦截下来,从而实一些特殊的功能。 过滤器一般完成一些通用的操作,比如…

python选择框和对话框

目录 1.文件打开和保存的选择框 2.选择或者输入对话框 1.文件打开和保存的选择框 tkinter.filedialog 模块中的 askopenfilename 函数和 asksaveasfilename 函数来显示文件打开和保存的选择框。 这两个函数的作用都是返回一个文件名。如果选择了一个文件,则会返回…

如何找到好的量化交易策略

目录 1 寻找量化交易策略的渠道2 如何筛选适合自己的量化交易策略3 量化交易策略的比较与评估4 人工智能和股票选择 1 寻找量化交易策略的渠道 可以从互联网,公共图书馆,交易员论坛,博客等渠道获取。下面是提供的一些具体资源网址&#xff1…

MySQL(二)基本SQL语句以及基本函数应用

1、基本SQL语句 MySQL中定义数据字段的类型对你数据库的优化是非常重要的。 MySQL支持多种类型,大致可以分为三类:数值、日期/时间和字符串(字符)类型。 - 函数应用在sql语句中 -- 临时表 select now() from dual;-- 数…