$nextTick底层原理(详细) - vue篇

公众号:需要以下pdf,关注下方


2023已经过完了,让我们来把今年的面试题统计号,来备战明年的金三银四!所以,不管你是社招还是校招,下面这份前端面试工程师高频面试题,请收好。

前言

nextTick 是 Vue 的一个核心实现,$nextTick方法将回调延迟到下次DOM更新循环之后执行。Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。

nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列

前置知识 - js事件循环

JS 运行机制

JS 执行是单线程的,基于事件循环。事件循环大致分为以下步骤:

  1. 所有同步任务都在主线程上执行,形成一个执行栈。
  2. 异步任务放进任务队列,异步任务分为宏任务和微任务
  3. 执行栈所有同步任务执行完成,就会执行任务队列。对应的异步任务,结束等待状态,进入执行栈,开始执行。
  4. 主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick,而所有的异步结果都是通过 “任务队列” 来调度。 消息队列中存放的是一个个的任务(task)。 task 分为两大类,分别是 macro task 和 micro task,并且每个 macro task(宏任务) 结束后,都要清空所有的 micro task(微任务)。

如图所示

 
for (macroTask of macroTaskQueue) {// 执行宏任务handleMacroTask();// 执行所有微任务for (microTask of microTaskQueue) {handleMicroTask(microTask);}
}

宏任务: script、setTimeout、setInterval、Node中的setImmediate 等
微任务: Promise.then、MutationObserver、Node 中的 Process.nextTick等

nextTick的具体实现原理

上源码

源码分为两部分,一是判断当前环境能使用的 API 并保存异步函数,二是调用异步函数执行回调队列

timerFunc函数定义,根据当前环境支持什么方法则确定调用哪个,分别有:

 
Promise.then`、`MutationObserver`、`setImmediate`、`setTimeout

通过上面任意一种方法,进行降级操作

 
export let isUsingMicroTask = false 
const callbacks = [] // 回调队列
let pending = false// 该方法执行队列中的全部回调
function flushCallbacks () {pending = falseconst copies = callbacks.slice(0)callbacks.length = 0// 执行任务队列for (let i = 0; i < copies.length; i++) {copies[i]()}
}
let timerFunc // 用来保存调用异步任务方法
// 判断1:是否原生支持Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {// 保存一个异步任务const p = Promise.resolve()timerFunc = () => {// 执行回调函数p.then(flushCallbacks)if (isIOS) setTimeout(noop)}isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {// 判断2:是否原生支持MutationObserverlet counter = 1const observer = new MutationObserver(flushCallbacks)const textNode = document.createTextNode(String(counter))observer.observe(textNode, {characterData: true})timerFunc = () => {counter = (counter + 1) % 2textNode.data = String(counter)}isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {//判断3:是否原生支持setImmediattimerFunc = () => {setImmediate(flushCallbacks)}
} else {//判断4:上面都不行,直接用setTimeouttimerFunc = () => {setTimeout(flushCallbacks, 0)}
}
 
export function nextTick(cb?: Function, ctx?: Object) {let _resolve;
​// cb 回调函数会经统一处理压入 callbacks 数组callbacks.push(() => {if (cb) {try {cb.call(ctx);} catch (e) {handleError(e, ctx, 'nextTick');}} else if (_resolve) {_resolve(ctx);}});
​// 执行异步延迟函数 timerFuncif (!pending) {pending = true;timerFunc();}
​// 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用if (!cb && typeof Promise !== 'undefined') {return new Promise(resolve => {_resolve = resolve;});}
}

callbacks就是异步操作队列

callbacks新增回调函数后又执行了timerFunc函数,pending是用来标识同一个时间只能执行一次

 
function flushCallbacks () {pending = falseconst copies = callbacks.slice(0)callbacks.length = 0for (let i = 0; i < copies.length; i++) {copies[i]()}
}

把回调函数放入callbacks等待执行,将执行函数放到微任务或者宏任务中 无论是微任务还是宏任务,都会放到flushCallbacks使用,这里将callbacks里面的函数复制一份,同时callbacks置空

循环遍历执行callbacks里面的函数

总结

  1. Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用
  2. nextTick核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,根据当前环境支持什么方法则确定调用哪个


原文链接:https://juejin.cn/post/7314493016497684520
 

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

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

相关文章

【力扣白嫖日记】1045.买下所有产品的客户

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1045.买下所有产品的客户 表&#xff1a;Customer 列名类型customer_idintproduct_keyint 该表可能包含重复…

数据结构 - Trie树(字符串统计、最大异或对)

文章目录 前言Part 1&#xff1a;Trie字符串统计1.题目描述输入格式输出格式数据范围输入样例输出样例 2.算法 Part 2&#xff1a;最大异或对1.题目描述输入格式输出格式数据范围输入样例输出样例 2.算法 前言 本篇博客将介绍Trie树的常见应用&#xff0c;包括&#xff1a;Trie…

运维随录实战(3)

Gitlab架构设计 方案一:SaaS方案 依赖资源: PostgreSQL: 阿里云SAAS服务高可用版2c4g/100GRedis:阿里云SAAS服务高可用版2G代码存储:阿里云NAS盘500GGitLab服务架构: 2*4c8g1*SLB(复用官网SLB)n*GitlabRunner备份方案 PostgreSQL通过阿里云备份功能每天备份一次 代码…

OPC DA协议网关

在工业自动化领域&#xff0c;数据的采集与传输是至关重要的环节。而OPC DA&#xff08;OLE for Process Control Data Access&#xff09;协议作为这一领域内的标准通信协议&#xff0c;为不同设备和软件之间的数据交换提供了统一的接口。今天&#xff0c;我们就来深入了解一下…

Cookie和session 及Web相关工具

一 Cookie &#xff08;一&#xff09;介绍 Cookie 又称为"小甜饼”。类型为"小型文本文件”&#xff0c;指某些网站为了辨别用户身份而储存在用户本地终端&#xff08;Client Side&#xff09;上的数据&#xff08;通常经过加密&#xff09;。由网景公司的前雇员…

Jmeter性能测试 -3数据驱动实战

什么是数据驱动&#xff1f; 从数据文件中读取测试数据&#xff0c;驱动测试过程的一种测试方法。数据驱动可以理解为更高级的参数化。 特点&#xff1a;测试数据与测试代码分离&#xff1b;数据控制过程 好处&#xff1a;降低开发和维护成本&#xff0c;减少代码量&#xf…

springboot之异步任务、邮件任务、定时任务

springboot之异步任务 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.…

.NET 视图组件(ViewComponent)教程大全

.NET 8 视图组件教程 1. 引言 什么是视图组件为什么使用视图组件 2. 创建视图组件 视图组件的命名规则如何定义 Invoke 或 InvokeAsync 方法如何从 ViewComponent 基类派生如何使用 ViewComponent 属性 3. 使用视图组件 如何在视图中调用视图组件如何传递参数到视图组件 …

MySQL 添加主键可以节省磁盘空间吗?

MySQL 表定义主键不是必须的&#xff0c;并且直到今天&#xff08;MySQL 版本 8.3.0&#xff09;都是这样。不过&#xff0c;在 MGR 和 PXC 架构中不允许使用没有主键的表。如果数据表没有主键&#xff0c;会有许多众所周知的负面性能影响&#xff0c;其中最痛苦的是复制速度很…

ROS 2基础概念#4:消息(Message)| ROS 2学习笔记

ROS 2消息简介 ROS程序使用三种不同的接口来进行沟通&#xff1a;消息&#xff08;message&#xff09;&#xff0c;服务&#xff08;service&#xff09;和动作&#xff08;action&#xff09;。ROS 2使用一种简化的描述语言&#xff1a;IDL&#xff08;interface definition…

Vue.js 深度解析:模板编译原理与过程

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

代码随想录算法训练营day36|435. 无重叠区间、763.划分字母区间、56. 合并区间

435. 无重叠区间 代码随想录 class Solution:def eraseOverlapIntervals(self, intervals: List[List[int]]) -> int:intervals.sort(keylambda x:x[0])result 0for i in range(1,len(intervals)):if intervals[i][0] < intervals[i-1][1]:result 1intervals[i][1] m…

【Spring底层原理高级进阶】Spring Kafka:实时数据流处理,让业务风起云涌!️

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &#x1f680; 本…

【python】堆排序

堆的概念 堆&#xff1a;一种特殊完全二叉树&#xff0c;也就是二叉树必须全部是满的&#xff0c;但是最后一排可以从右向左缺失。 大根堆&#xff1a;每个节点都比他的子节点大 小根堆&#xff1a;每个节点都比子节点小 堆在代码中的形式 堆在代码中实际上就是列表&#…

[Angular 基础] - routing 路由(下)

[Angular 基础] - routing 路由(下) 之前部分 Angular 笔记&#xff1a; [Angular 基础] - 自定义指令&#xff0c;深入学习 directive [Angular 基础] - service 服务 [Angular 基础] - routing 路由(上) 使用 route 书接上回&#xff0c;继续折腾 routing 按照最初的 wi…

【JavaScript】forEach() 会不会改变原数组?

forEach() forEach()方法需要一个函数作为参数。这种函数&#xff0c;是由我们创建但是不由我们调用的&#xff0c;我们称为回调函数。 数组中有几个元素&#xff0c;该回调函数就会执行几次。 回调函数中传递三个参数&#xff1a; 参数1&#xff1a;当前正在遍历的元素 参…

洛谷P1039题解

题目描述 明明同学最近迷上了侦探漫画《柯南》并沉醉于推理游戏之中&#xff0c;于是他召集了一群同学玩推理游戏。游戏的内容是这样的&#xff0c;明明的同学们先商量好由其中的一个人充当罪犯&#xff08;在明明不知情的情况下&#xff09;&#xff0c;明明的任务就是找出这…

Linux--文件(2)-重定向和文件缓冲

命令行中的重定向符号 介绍和使用 在Linux的命令行中&#xff0c;重定向符号用于将命令的输入或输出重定向到文件或设备。 常见的重定向符号&#xff1a; 1.“>“符号&#xff1a;将命令的标准输出重定向到指定文件中&#xff0c;并覆盖原有的内容。 2.”>>“符号&a…

1.初识python

1.初识python 编程语言是用来定义计算机程序的语言&#xff0c;用来向计算机发出指令。 1.python语言是一种面向对象的解释型高级编程语言。 解释型语言&#xff1a;使用专门的解释器对源码程序逐行解释成特定平台的机器并立即执行&#xff0c;是代码在执行时才被解释器一行行…

c++数据结构算法复习基础-- 3 --线性表-单向链表-笔试面试常见问题

1、单链表逆序 思路图 代码实现 //著: 链表结构里记得加 friend void ReverseLink(Clink& link); void ReverseLink(Clink& link) {Node* p link.head_->next_;while( p nullptr){return;}Node* q p->next_;link.head_->next_ nullptr;while(p ! nullpt…