源码在vue/core/util/next-tick.js下,自行查阅,内容不多。
前提: DOM更新是异步更新,目的是优化浏览器性能。开启一个任务队列,并缓存在同一事件循环中发生的所有数据变更,最后一次进行更新。
为什么有它?
由于DOM是异步更新的,为了防止更新完数据,不能立马拿到更新完数据的dom,从而影响执行的方法。 提出nextTick的方法。本质上是一个回调函数,在dom更新完后执行。
使用场景
想要操作 基于最新数据生成的DOM 时,就将这个操作放在 nextTick 的回调中;
原理
主要流程:
- 把回调函数放入callbacks等待执行
- 将执行函数放到微任务或者宏任务中 --判断浏览器是否支持promise .then;settimeout等等,依次判断异步支持事件。
- 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调
参考链接:
- (75条消息) vue.nextTick()方法的使用详解(简单明了)_广积粮缓称王的博客-CSDN博客_nexttick ---清晰易懂;有代码演示,简单过一遍
- 面试官:Vue中的$nextTick有什么作用? | web前端面试 - 面试官系列 (vue3js.cn) ----结构清晰
- Vue中$nextTick源码解析 - 掘金 (juejin.cn) ------了解了vue的DOM的更新是异步执行的
- nextTick实现原理,必拿下! - 掘金 (juejin.cn) ---结构清晰,易于理解,还解释了为何需要浅拷贝slice
- 为什么 nextTick 中就能拿到 DOM 更新后的结果了_哔哩哔哩_bilibili ---视频过一下