vue中 nextTick是微任务 还是宏任务理论知识讲解

于 2024-05-10 16:05:56 发布
阅读量431 收藏
点赞数 4
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75381690/article/details/138670060
版权

Vue中nextTick是微任务 内部是一个成功的promise 在vue2中为了浏览器的兼容性问题

首先判断浏览器是否支持proimse vue会先优化使用proimse的.then方式在实现nextTick由于Promise的.then方法是在微任务队列中执行的 因此在这种情况下 nextTick可以被视为一个微任务

如果浏览器不支持promise也不支持MutationObserver vue会尝试使用setimmediate（这是一共比setTimeout更高效的宏任务API 但并非所有浏览器都支持）如果setimmediate可用 那么nextTick就是一个宏任务 

因此 vue的nextTick 即可能是微任务也可能是宏任务 这取决于在运行中检测到的浏览器的环境和API支持情况

小付讲解
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nextTick的实现原理
布里渊区
06-22 4172
首先nextTick并不是浏览器本身提供的一个异步API，而是Vue中，用过由浏览器本身提供的原生异步API封装而成的一个异步封装方法。 它对于浏览器异步API的选用规则如下，Promise存在取由Promise.then，不存在Promise则取MutationObserver，MutationObserver不存在setImmediate，setImmediate不存在最后取setTimeout来实现。 nextTick即有可能是微任务，也有可能是宏任务，从优先去Promise和MutationO
怎么理解vue中$nextTick
fansfanfan的博客
12-20 895
为什么需要 nextTick Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改==》刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个API了。 准备 在理解nextTick原理之前，我们先说一下事件循环（EventLoop）中的宏任务和微任务 。 常见的宏任务：script, setTimeout, setInterval, setImmediate, I/O, UI rendering等； 常见的微任
nextTick实现原理 微任务
最新发布
harvestUachieve的博客
09-10 597
nextTick。
宏任务与微任务执行顺序（超详细讲解）
~朴：shu的博客
02-27 6514
写此之前，也查阅了很多文章，并结合自己的理解，说说对Event Loop模型的理解、以及对在任务队列中的影响进行了分析，也给出了多种情形的任务案例以及分析解释，相信大家看完会有所收获；当然，也是自己的理解，难免有所偏差，欢迎大家指正~
vue $nextTick()的使用
m0_60747444的博客
03-01 798
nextTick()的原理
JavaScript | 从nextTick到宏任务与微任务
liuj4 | 自娱自乐
08-11 3537
Vue.nextTick官方文档： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 言外之意，Vue中的DOM(view)都不是在修改model之后马上更新的，而是一个异步的更新过程：在修改了model之后，把这些数据的修改全部 push 到一个队列里，然后内部调用 一次 nextTick 去更新视图。 为了了解每次tick/loop...
$nextTick和setTimeout区别（宏任务微任务）
u010565037的博客
07-13 4913
nextTick和setTimeout区别（宏任务微任务）
由$nextTick() 理解js异步宏任务和微任务
weixin_41897122的博客
12-26 2577
在vue框架开发中，我们经常会用到this.$nextTick()方法，官方的解释是：**在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM**，那么在哪些实际场景中去使用呢，它的原理是什么呢？我们接着往下看。 this.$nextTick()方法主要是用在数据改变，dom改变应用场景中。我们知道js是单线程，异步任务会放到事件队列中，等待同步任务执行完毕之后再执行。由于**vue中数据和dom渲染由于是异步的**，所以，要让dom结构随数据改变这样的操作都应
从vue.nextTick看宏任务和微任务
weixin_34255793的博客
10-01 3165
Vue 是异步执行 DOM 更新的，其中nextTick就是等待操作完成再执行dom操作，vue.nextTick是vue实现生命周期的重要API函数，官方文档对nextTick的介绍如下： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。 vue.nextTick的实现就是根据宏任务、微任务，我们可以中github中查看nextT...
【Vue原理】NextTick - 源码版 之 宏微任务的抉择
chongzhun5695的博客
07-15 223
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】NextTick...
理解Vue.nextTick使用及源码分析(微任务的妙用)
陈坚泓的博客
09-16 6089
异步更新机制使用微任务或宏任务，基于事件循环运行，在 Vue 中对性能起着至关重要的作用，它对重复冗余的 watcher 进行过滤。 而 nextTick 根据不同的环境，使用优先级最高的异步任务。这样做的好处是等待所有的状态同步更新完毕后，再一次性渲染页面。 用户创建的 nextTick 运行页面更新之后，因此能够获取更新后的DOM。
Vue.nextTick()原理
qq_42675884的博客
12-16 198
JS运行机制（Event Loop） JS执行是单线程的，它是基于事件循环的。 所有同步任务都在主线程上执行，形成一个执行栈。 主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。 当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待状态，进入执行栈。 主线程不断重复第三步。 这里主线程的执行过程就是一个tick，而所有的异步结果都是通过任务队列来调度。Event Loop 分为宏任务和微任务，无论是执行宏任务还是微任务，完成后都会进入到一下ti
Vue-nextTick
nknmn
11-08 307
nextTick
宏任务、微任务、vue nextTick了解一下？
weixin_33971130的博客
03-21 1790
先附上两篇参考资料Tasks, microtasks, queues and schedules,英语好的同学可直接移步，写的十分精彩。 Vue.$nextTick背后的Event Loop,Tasks, microtasks 阅读此文章需要了解js事件机制的预备知识。 宏任务、微任务 首先要说明的是task、macrotask指的都是宏任务、而microtask指的则是微任务。 每个宏任务之间，...
微任务宏任务及vue nextTick的分析
sumtre_w的博客
08-31 343
写的很清晰 https://www.cnblogs.com/yaoyao-sun/p/10475689.html#_label2
[vue2源码]深度理解Vue中nextTick
一再问究竟的博客
10-03 595
概念： nextTick： nextTick主要是使用了宏任务 (macrotask) 和微任务 (microtask) ，定义了一个异步方法，多次调用 nextTick 会将方法存入callback队列中，通过这个异步方法清空当前队列 macrotask： setTimeout, setInterval, setImmediate, I/O, UI rendering microtask： process.nextTick, Promise, MutationObserver 顺序： 任务队列中，在每一次
这一次，彻底弄懂 JavaScript 执行机制
weixin_33739646的博客
11-21 1540
本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。 不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论： javascript是按照语句出现的顺序执行的 看到这里读者要打人了：我难道不知道js是...
宏任务和微任务到底是什么？如何执行的？
a_靖的博客
12-07 3892
先来一道常见的面试题： console.log('start') setTimeout(() => { console.log('setTimeout') }, 0) new Promise((resolve) => { console.log('promise') resolve() }) .then(() => { console.log('then1') }) .then(() => { console.log('then2.
vue中nextTick
08-24
Vue中的nextTick是一个异步方法，它用于在下次DOM更新循环结束之后执行回调函数。在Vue中，当我们修改数据后，DOM不会立即更新，而是在下一个事件循环中才会进行更新。而使用nextTick可以确保我们在DOM更新完成后再...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值