【Vue原理】NextTick - 源码版 之 宏微任务的抉择

最新推荐文章于 2024-05-10 16:05:56 发布
最新推荐文章于 2024-05-10 16:05:56 发布
阅读量577 收藏
点赞数 2
分类专栏： Vue原理 文章标签： vue javascript 前端开发 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27460969/article/details/96021917
版权

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】NextTick - 源码版 之 宏微任务的抉择

nextTick 已经写了三篇文章啦，这是最后一篇源码版，没看过的童鞋可以看看白话版简单了解下拉

【Vue原理】NextTick - 白话版 简单了解下NextTick

<
最低0.47元/天 解锁文章
神仙朱
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
Vue中之nextTick函数源码分析详解
12-29
1. 什么是Vue.nextTick()？ 官方文档解释如下： 在下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 2. 为什么要使用nextTick? <!DOCTYPE html> <html> &lt...
nextTick的实现原理
布里渊区
06-22 4129
首先nextTick并不是浏览器本身提供的一个异步API，而是Vue中，用过由浏览器本身提供的原生异步API封装而成的一个异步封装方法。 它对于浏览器异步API的选用规则如下，Promise存在取由Promise.then，不存在Promise则取MutationObserver，MutationObserver不存在setImmediate，setImmediate不存在最后取setTimeout来实现。 nextTick即有可能是微任务，也有可能是宏任务，从优先去Promise和MutationO
vue中 nextTick是微任务 还是宏任务理论知识讲解
2201_75381690的博客
05-10 376
如果浏览器不支持promise也不支持MutationObserver vue会尝试使用setimmediate（这是一共比setTimeout更高效的宏任务API 但并非所有浏览器都支持）如果setimmediate可用 那么nextTick就是一个宏任务。首先判断浏览器是否支持proimse vue会先优化使用proimse的.then方式在实现nextTick由于Promise的.then方法是在微任务队列中执行的 因此在这种情况下 nextTick可以被视为一个微任务。
Vue.nextTick()原理
qq_42675884的博客
12-16 193
JS运行机制（Event Loop） JS执行是单线程的，它是基于事件循环的。 所有同步任务都在主线程上执行，形成一个执行栈。 主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。 当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待状态，进入执行栈。 主线程不断重复第三步。 这里主线程的执行过程就是一个tick，而所有的异步结果都是通过任务队列来调度。Event Loop 分为宏任务和微任务，无论是执行宏任务还是微任务，完成后都会进入到一下ti
怎么理解vue中$nextTick
fansfanfan的博客
12-20 887
为什么需要 nextTick Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改==》刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个API了。 准备 在理解nextTick原理之前，我们先说一下事件循环（EventLoop）中的宏任务和微任务 。 常见的宏任务：script, setTimeout, setInterval, setImmediate, I/O, UI rendering等； 常见的微任
Vue源码阅读（27）：vm.$nextTick、Vue.nextTick 的源码解析
f18855666661的博客
09-08 502
官方文档点击这里。 今天和大家讲讲 Vue 中的 vm.$nextTick 和 Vue.nextTick，这两个方法的底层实现是一样的，都是使用了名为 nextTick 的公共方法，看下面的源码。 声明 Vue 的原型函数 $nextTick，这个原型函数能够在 Vue 的实例上访问： // src/core/instance/render.js import { nextTick } from '../util/index' export function renderMixin (Vu.
vue源码nextTick使用及原理解析
10-16
在Vue的源码中，`nextTick`是一个非常关键的工具，用于在未来的DOM更新周期之后执行回调。这个概念对于理解Vue如何处理异步更新队列至关重要。 1. **nextTick的使用** 在Vue中，当你修改数据时，DOM并不会立即更新...
基于Vue的vue-admin-better管理后台框架设计源码
最新发布
05-23
vue-admin-better是一个基于Vue开发的国内首个纯净的vue3管理后台框架，包含197个文件，其中包括76个JavaScript文件、72个Vue文件、7个JPG图片文件、7个SCSS文件、6个PNG图片文件、5个CSS文件、4个JSON文件和4个SVG...
vue 任务队列和异步更新策略 （清晰理解任务队列、微任务、宏任务）
热门推荐
June.1
06-30 1万+
事件循环 JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。 任务队列
Vue3铺垫知识【ES6 模块化、Promise、async/await、EventLoop、宏任务和微任务、总结】
m0_52896752的博客
11-20 1022
Vue3铺垫知识【ES6 模块化、Promise、async/await、EventLoop、宏任务和微任务、总结】
nextTick 使用场景和原理 ？
muzidigbig的博客
07-07 1311
nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。nextTick 是 Vue 提供的一个异步方法，用于在下次 DOM 更新循环结束之后执行回调函数。
vue $nextTick()的使用
m0_60747444的博客
03-01 784
nextTick()的原理
Vue之事件相关
玉案轩窗的博客
01-26 884
前言 本篇文章带来Vue.js的事件机制，具体的分析点如下： $emit、$on、$off、$once背后的处理逻辑 @click形式背后的处理逻辑 具体逻辑梳理 实际上在 Vue初始化 这篇文章中就提及了事件相关实例方法的创建，这里就在具体说下。 在Vue.js文件加载执行，其中会执行eventsMixin函数，该函数的作用就是： 创建事件相关的的原型方法，即$on、$once、$off、...
4、宏任务和微任务
s12345672的博客
10-23 358
1、什么是宏任务和微任务 JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是： 1.宏任务（macrotask） 异步 Ajax 请求、 setTimeout、setInterval、 文件操作 其它宏任务 2.微任务（microtask） Promise.then、.catch 和 .finally process.nextTick 其它微任务 2、执行顺序 每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个
$nextTick和setTimeout区别（宏任务微任务）
u010565037的博客
07-13 4871
nextTick和setTimeout区别（宏任务微任务）
由$nextTick() 理解js异步宏任务和微任务
weixin_41897122的博客
12-26 2564
在vue框架开发中，我们经常会用到this.$nextTick()方法，官方的解释是：**在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM**，那么在哪些实际场景中去使用呢，它的原理是什么呢？我们接着往下看。 this.$nextTick()方法主要是用在数据改变，dom改变应用场景中。我们知道js是单线程，异步任务会放到事件队列中，等待同步任务执行完毕之后再执行。由于**vue中数据和dom渲染由于是异步的**，所以，要让dom结构随数据改变这样的操作都应
从vue.nextTick看宏任务和微任务
weixin_34255793的博客
10-01 3162
Vue 是异步执行 DOM 更新的，其中nextTick就是等待操作完成再执行dom操作，vue.nextTick是vue实现生命周期的重要API函数，官方文档对nextTick的介绍如下： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。 vue.nextTick的实现就是根据宏任务、微任务，我们可以中github中查看nextT...
vue2 nextTick原理及源码
04-01
Vue2中的nextTick方法是用来在下一次DOM更新循环结束之后执行延迟回调的方法。它的核心原理是利用了浏览器的异步任务队列机制，将回调函数加入到任务队列中，在下一次DOM更新循环结束之后执行。 具体实现原理如下： 1. nextTick方法会先判断是否已经有一个回调队列，如果没有就创建一个空数组作为队列。 2. 将回调函数加入到队列中。 3. 判断是否已经有一个异步任务，如果没有就创建一个异步任务，并将其加入到任务队列中。 4. 当异步任务执行时，会依次执行回调函数队列中的所有函数。 下面是nextTick的源码： ```javascript export function nextTick (cb?: Function, ctx?: Object) { let _resolve callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } } else if (_resolve) { _resolve(ctx) } }) if (!pending) { pending = true if (useMacroTask) { macroTimerFunc() } else { microTimerFunc() } } // $flow-disable-line if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve }) } } ``` 其中callbacks是一个数组，用来保存回调函数队列。pending表示是否已经有一个异步任务在执行，useMacroTask表示是否使用宏任务，用来区分不同的环境（浏览器、node等）。 在上面的代码中，先把回调函数加入到队列中，然后判断是否已经有一个异步任务在执行。如果没有，就创建一个异步任务并加入到任务队列中。如果使用宏任务，就使用setTimerout来创建异步任务，如果不使用宏任务，就使用微任务（Promise）。 最后，如果没有传入回调函数，但是环境支持Promise，则返回一个Promise对象，以便在异步任务执行完毕后可以进行链式调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值