$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…

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…

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…

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…

YOLOv8改进 在更换的PoolFormer主干网络中增加注意力机制

一、PoolFormer的网络结构 PoolFormer采用自注意力机制和池化操作相结合的方式&#xff0c;同时考虑了局部和全局的特征关系。 具体的代码如&#xff08;YOLOv8改进 更换多层池化操作主干网络PoolFormer_yolov8池化-CSDN博客&#xff09;所示。 二、Global Attention Mechan…

python一张大图找小图的个数

python一张大图找小图的个数 一、背景 有时候我们在浏览网站时&#xff0c;发现都是前端搞出来的一张张图&#xff0c;我们只能用盯住屏幕的小眼睛看着&#xff0c;很累的统计&#xff0c;这个是我在项目中发现没办法统计&#xff0c;网上的教程很多&#xff0c;都不成功&…

Python 面向对象编程——类的使用

一、学习目标 1&#xff0e;掌握类的定义和实例化对象。 2&#xff0e;熟练掌握类的构造函数__init__使用。 3&#xff0e;掌握类的继承机制和使用。 二、相关练习 1、定义一个玩具类Toy()&#xff0c;创建名字为“小汽车”、“手枪”和“积木”的玩具实例&#xff0c;计…

深圳牵头打造鸿蒙原生应用软件生态 | 百能云芯

深圳市工业和信息化局、深圳市政务服务和数据管理局于3月3日联合印发了《深圳市支持开源鸿蒙原生应用发展2024年行动计划》。这一计划旨在通过政策引导、市场推动、社会协同的方式&#xff0c;将深圳打造成一个鸿蒙原生应用软件生态的中心&#xff0c;推动鸿蒙系统在当地的发展…

PyQT6的从零开始在Pycharm中配置与使用

PyQT6的从零开始在Pycharm中配置与使用 1.安装PyQt6 PyQt6-tools2.在Pycharm中配置扩展工具2.1配置QTdesigner2.2配置Pyuic 3.启动3.1、启动designer3.2、启动Pyuic 1.安装PyQt6 PyQt6-tools pip install PyQt6 PyQt6-tools安装成功后&#xff0c;查看安装版本&#xff0c;版本…

基于springboot+vue的医疗报销系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…