vue的dom异步更新是微任务还是宏任务?

2023-03-23 0 3,837

有一个问题不明白,vue官网解释,DOM的更新非同步生效的,而是Vue将它们缓存在一个队列中,直到下一个Tick才执行,那这个DOM的异步更新到底算是微任务还是宏任务呢

如果说是微任务,那么为什么解释为下一次Tick才执行,当主执行栈执行完任务后,如果微任务队列有任务,拿到主执栈执行,然后页面进行渲染,算作一次Tick,而此时DOM更新操作算作微任务的话就是当前Tick的微任务执行,而不是在下一次Tick中执行

如果说DOM的异步更新时宏任务的话,在下一次Tick的时候作为宏任务执行就又有一个疑问
nextTick将传入的函数生成一个异步任务,可以是微任务也是宏任务,那么当代码执行到nextTick的时候,如果生成的是微任务,当本次执行栈结束后,不是会执行当前这个nextTick生成的微任务吗,此时也不会获取到更新后的DOM

个人理解,官方理解的一次Tick是指主执行栈结束后,微任务执行前算作一次Tick,然后Dom的异步更新是一种微任务

回答:

这个其实要分 VUE 的版本来看:

  • vue2 中由于要考虑兼容性问题,所以会优先使用微任务,否则降级使用宏任务的方式实现,优雅降级内容为:Promise > MutationObserver > setImmediate > setTimeout
  • vue3 版本已经不需要考虑类似 IE 的兼容问题,因此其内部直接使用 Promise 来实现
  • 在 Vue 中,DOM 异步更新是通过微任务实现的。当 Vue 响应式数据发生改变后,Vue 会将这些更新放入一个异步队列中,然后通过微任务调度器来执行异步更新,从而避免阻塞主线程。
  • Vue 中通过 Promise.then、MutationObserver、process.nextTick 等方式来实现微任务。这些方式的共同点是都可以将任务添加到微任务队列中,在当前任务执行完毕后立即执行微任务队列中的任务,因此 DOM 异步更新属于微任务。
vue的dom异步更新是微任务还是宏任务?
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. JK下载官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. JK下载官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. JK开发团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

JK软件下载官网 技术分享 vue的dom异步更新是微任务还是宏任务? https://www.jkxiazai.com/872.html

JK软件应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务