Vue3源码分析之微任务队列
参考资料:https://zh.javascript.info/microtask-queue#wei-ren-wu-dui-lie-microtaskqueue
简化版 Vue3 中的 微任务队列实例及说明:
// 任务队列
const queue = []
// 创建一个异步函数
const task = Promise.resolve() function nextTick(fn) {
task.then(fn)
} // k 这个参数是为了调试
function queueJob(job, k) {
// 如果队列中不存在这个 任务,则先存入队列
if(!queue.find(c => c.job === job)) {
queue.push({ job, key: k})
// 执行所有的任务
queueFlush()
}
} function queueFlush() {
const taskFn = () => {
let job;
// 每执行完成一个任务就从队列中移除
while ((job = queue.shift())) {
if (job) {
// 输出的是第几次加入队列的函数
console.log(job.key)
job.job();
}
}
}
// taskFn 这个函数其实并没有被立即执行,而是先存入了 微任务队列(PromiseJobs)
// 需要等待当前代码执行完成并且先前排队的处理程序(handler)都完成时才会被执行
// 由于每次都会执行所有任务后都会清空队列
// 所以保证只会执行最后一次放入 queue 队列的所有任务
nextTick(taskFn)
} // ---- 测试 ----
let i = 0
function fn1() {
console.log(i)
}
i++
// 输出 -> 11
// 该任务没有被立即执行,而是等待当前代码执行完成之后才被执行,所以 i = (0 + 1 + 10) = 11
queueJob(fn1, 'a')
i += 10
queueJob(fn1, 'b') // 不会被加入队列,因为队列中已经存在该任务了
在Vue3中,利用 微任务 队列确保不会因为依赖而导致许多不必要的更新,比如:
const count = ref(0) <template>
<div>{{ count }}</div>
<tempalte> for(let i = 0; i < 100; i++) {
count ++
}
如果没有通过微任务进行管理,那么会更新100次,但是只有当 for 被执行完成之后更新才是有必要的,Vue3就是利用微任务的特点来进行统一管理的
Vue3源码分析之微任务队列的更多相关文章
- [源码分析]并行分布式任务队列 Celery 之 子进程处理消息
[源码分析]并行分布式任务队列 Celery 之 子进程处理消息 0x00 摘要 Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度.在前 ...
- [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat
[源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat 目录 [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat 0 ...
- Vue3源码分析之 Ref 与 ReactiveEffect
Vue3中的响应式实现原理 完整 js版本简易源码 在最底部 ref 与 reactive 是Vue3中的两个定义响应式对象的API,其中reactive是通过 Proxy 来实现的,它返回对象的响应 ...
- Vue3源码分析之Diff算法
Diff 算法源码(结合源码写的简易版本) 备注:文章后面有详细解析,先简单浏览一遍整体代码,更容易阅读 // Vue3 中的 diff 算法 // 模拟节点 const { oldVirtualDo ...
- Vue3中的响应式对象Reactive源码分析
Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...
- SpringCloud微服务如何优雅停机及源码分析
目录 方式一:kill -9 java进程id[不建议] 方式二:kill -15 java进程id 或 直接使用/shutdown 端点[不建议] kill 与/shutdown 的含义 Sprin ...
- Netty源码分析第2章(NioEventLoop)---->第8节: 执行任务队列
Netty源码分析第二章: NioEventLoop 第八节: 执行任务队列 继续回到NioEventLoop的run()方法: protected void run() { for (;;) ...
- 微服务之SpringCloud实战(四):SpringCloud Eureka源码分析
Eureka源码解析: 搭建Eureka服务的时候,我们会再SpringBoot启动类加上@EnableEurekaServer的注解,这个注解做了一些什么,我们一起来看. 点进@EnableEure ...
- [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP
[源码分析] 分布式任务队列 Celery 之 发送Task & AMQP 目录 [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP 0x00 摘要 0x01 ...
随机推荐
- [LeetCode] 729. My Calendar I 731. My Calendar II 732. My Calendar III 题解
题目描述 MyCalendar主要实现一个功能就是插入指定起始结束时间的事件,对于重合的次数有要求. MyCalendar I要求任意两个事件不能有重叠的部分,如果插入这个事件会导致重合,则插入失败, ...
- 1479 小Y的数论题
小Y喜欢研究数论,并且喜欢提一些奇怪的问题.这天他找了三个两两互质的数a, b, c,以及另一个数m, 现在他希望找到三个(0, m)范围内的整数x, y, z,使得 (xa+yb) Mod m=(z ...
- The 2015 China Collegiate Programming Contest -ccpc-c题-The Battle of Chibi(hdu5542)(树状数组,离散化)
当时比赛时超时了,那时没学过树状数组,也不知道啥叫离散化(貌似好像现在也不懂).百度百科--离散化,把无限空间中无限的个体映射到有限的空间中去,以此提高算法的时空效率. 这道题是dp题,离散化和树状数 ...
- 在线编辑Word——插入图片、图形
在Word中支持插入图片.图形等元素,同时支持对插入的图片和图形进行格式化操作,如裁剪.调整尺寸大小.调成颜色.阴影.倾斜角度.透明度等等.本文,将通过使用Spire.Cloud Word在线编辑器来 ...
- Chapter 12 IP Weighting and Marginal Structural Model
目录 12.1 The causal question 12.2 Estimating IP weights via modeling 12.3 Stabilized IP weights 12.4 ...
- Unsupervised Domain Adaptation by Backpropagation
目录 概 主要内容 代码 Ganin Y. and Lempitsky V. Unsupervised Domain Adaptation by Backpropagation. ICML 2015. ...
- A Primer on Domain Adaptation Theory and Applications
目录 概 主要内容 符号说明 Prior shift Covariate shift KMM Concept shift Subspace mapping Wasserstein distance 应 ...
- Java程序设计基础笔记 • 【第6章 循环结构进阶】
全部章节 >>>> 本章目录 6.1 for循环 6.1.1 for循环的简介 6.1.2 for循环的使用 6.1.3 for循环的表达式 6.1.4 实践练习 6.2 ...
- Kerberos认证过程学习理解
概念: Kerberos服务器:AS认证服务器,TGS服务授权服务器 Client 客户端,代表使用应用的用户 AppServer 服务端,应用提供各种服务的服务器 Client在Kerberos注册 ...
- Drupal 8 环境搭建部署
运行环境安装 系统:Ubuntu Server 16.04 (ubuntu-16.04.4-server-amd64.iso) Web服务器:Apache / 2.4.18 数据库:Mysql / ...