参考资料: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源码分析之微任务队列的更多相关文章

  1. [源码分析]并行分布式任务队列 Celery 之 子进程处理消息

    [源码分析]并行分布式任务队列 Celery 之 子进程处理消息 0x00 摘要 Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度.在前 ...

  2. [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat

    [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat 目录 [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat 0 ...

  3. Vue3源码分析之 Ref 与 ReactiveEffect

    Vue3中的响应式实现原理 完整 js版本简易源码 在最底部 ref 与 reactive 是Vue3中的两个定义响应式对象的API,其中reactive是通过 Proxy 来实现的,它返回对象的响应 ...

  4. Vue3源码分析之Diff算法

    Diff 算法源码(结合源码写的简易版本) 备注:文章后面有详细解析,先简单浏览一遍整体代码,更容易阅读 // Vue3 中的 diff 算法 // 模拟节点 const { oldVirtualDo ...

  5. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  6. SpringCloud微服务如何优雅停机及源码分析

    目录 方式一:kill -9 java进程id[不建议] 方式二:kill -15 java进程id 或 直接使用/shutdown 端点[不建议] kill 与/shutdown 的含义 Sprin ...

  7. Netty源码分析第2章(NioEventLoop)---->第8节: 执行任务队列

      Netty源码分析第二章: NioEventLoop   第八节: 执行任务队列 继续回到NioEventLoop的run()方法: protected void run() { for (;;) ...

  8. 微服务之SpringCloud实战(四):SpringCloud Eureka源码分析

    Eureka源码解析: 搭建Eureka服务的时候,我们会再SpringBoot启动类加上@EnableEurekaServer的注解,这个注解做了一些什么,我们一起来看. 点进@EnableEure ...

  9. [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP

    [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP 目录 [源码分析] 分布式任务队列 Celery 之 发送Task & AMQP 0x00 摘要 0x01 ...

随机推荐

  1. [LeetCode] 729. My Calendar I 731. My Calendar II 732. My Calendar III 题解

    题目描述 MyCalendar主要实现一个功能就是插入指定起始结束时间的事件,对于重合的次数有要求. MyCalendar I要求任意两个事件不能有重叠的部分,如果插入这个事件会导致重合,则插入失败, ...

  2. 1479 小Y的数论题

    小Y喜欢研究数论,并且喜欢提一些奇怪的问题.这天他找了三个两两互质的数a, b, c,以及另一个数m, 现在他希望找到三个(0, m)范围内的整数x, y, z,使得 (xa+yb) Mod m=(z ...

  3. The 2015 China Collegiate Programming Contest -ccpc-c题-The Battle of Chibi(hdu5542)(树状数组,离散化)

    当时比赛时超时了,那时没学过树状数组,也不知道啥叫离散化(貌似好像现在也不懂).百度百科--离散化,把无限空间中无限的个体映射到有限的空间中去,以此提高算法的时空效率. 这道题是dp题,离散化和树状数 ...

  4. 在线编辑Word——插入图片、图形

    在Word中支持插入图片.图形等元素,同时支持对插入的图片和图形进行格式化操作,如裁剪.调整尺寸大小.调成颜色.阴影.倾斜角度.透明度等等.本文,将通过使用Spire.Cloud Word在线编辑器来 ...

  5. 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 ...

  6. Unsupervised Domain Adaptation by Backpropagation

    目录 概 主要内容 代码 Ganin Y. and Lempitsky V. Unsupervised Domain Adaptation by Backpropagation. ICML 2015. ...

  7. A Primer on Domain Adaptation Theory and Applications

    目录 概 主要内容 符号说明 Prior shift Covariate shift KMM Concept shift Subspace mapping Wasserstein distance 应 ...

  8. Java程序设计基础笔记 • 【第6章 循环结构进阶】

    全部章节   >>>> 本章目录 6.1 for循环 6.1.1 for循环的简介 6.1.2 for循环的使用 6.1.3 for循环的表达式 6.1.4 实践练习 6.2 ...

  9. Kerberos认证过程学习理解

    概念: Kerberos服务器:AS认证服务器,TGS服务授权服务器 Client 客户端,代表使用应用的用户 AppServer 服务端,应用提供各种服务的服务器 Client在Kerberos注册 ...

  10. Drupal 8 环境搭建部署

    运行环境安装 系统:Ubuntu Server 16.04  (ubuntu-16.04.4-server-amd64.iso) Web服务器:Apache / 2.4.18 数据库:Mysql / ...