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

  • Z时代
  • 2024-02-05
  • 分类：IT

有一个问题不明白，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 来实现
本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

在 Vue 中，DOM 异步更新是通过微任务实现的。当 Vue 响应式数据发生改变后，Vue 会将这些更新放入一个异步队列中，然后通过微任务调度器来执行异步更新，从而避免阻塞主线程。

Vue 中通过 Promise.then、MutationObserver、process.nextTick 等方式来实现微任务。这些方式的共同点是都可以将任务添加到微任务队列中，在当前任务执行完毕后立即执行微任务队列中的任务，因此 DOM 异步更新属于微任务。

以上是 vue的dom异步更新是微任务还是宏任务？ 的全部内容， 来源链接： utcz.com/p/933837.html

回到顶部