参考资料: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】7. Reverse Integer 整数反转

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:整数,反转,题解,Leetcode, 力扣,Python, ...

  2. Codeforces 189A:Cut Ribbon(完全背包,DP)

    time limit per test : 1 second memory limit per test : 256 megabytes input : standard input output : ...

  3. CS5266代替AG9311|Type C转HDMI带PD3.0转换芯片|AG9311替代方案

    ALGOLTEK AG9311是一款带PD3.0 Type C转HDMI的转换芯片,它主要用于usb Type-c拓展坞以及多功能usb Type-c转换器等产品设计当中,台湾瑞奇达新推出的CS526 ...

  4. CS5216 设计于DP转HDMI转换器|DP转HDMI 1080P中继器 电平转化器开关设计方案与线路图

    CS5216是一款Displayport to hdmi 1080p音视频信号转换芯片,主要用于设计与开发DP转HDMI 转换器.中继器.电平转换器等产品当中.它支持交流和直流耦合TMDS信号高达1. ...

  5. Spring企业级程序设计 • 【第4章 Spring持久化层和事务管理】

    全部章节   >>>> 本章目录 4.1 配置数据源资源 4.1.1 JdbcTemplate介绍 4.1.2通过ComboPooledDataSource创建数据源 4.1. ...

  6. 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

    查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...

  7. Ranger-AdminServer安装

    Ranger-AdminServer安装,对应的Ranger版本1.0.0. RangerAdmin安装依赖如下组件: mysql solr IP/机器名 安装软件 运行进程 zdh-245 Rang ...

  8. Java 获取客户端浏览器中的语言设置

    获取客户端的首选语言 javax.servlet.ServletRequest.getLocale() 根据Accept-Language请求头返回客户端的首选语言.如果客户端请求没有Accept-L ...

  9. SpringBoot 之 扩展 SpringMVC

    增加自定义视图解析器: # src/main/java/com/wu/config/MyMvcConfig.java @Configuration // 标注这个类是一个配置类 public clas ...

  10. 字符串的展开expand

    A. 字符串的展开(expand.cpp) 内存限制:64 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 在初赛普及组的"阅读程序写结果&qu ...