nextTick由浅入深

70 阅读1分钟

源码在vue/core/util/next-tick.js下,自行查阅,内容不多。

前提: DOM更新是异步更新,目的是优化浏览器性能。开启一个任务队列,并缓存在同一事件循环中发生的所有数据变更,最后一次进行更新。

为什么有它?

由于DOM是异步更新的,为了防止更新完数据,不能立马拿到更新完数据的dom,从而影响执行的方法。 提出nextTick的方法。本质上是一个回调函数,在dom更新完后执行。

使用场景

想要操作 基于最新数据生成的DOM  时,就将这个操作放在 nextTick 的回调中;

原理

主要流程:

  1. 把回调函数放入callbacks等待执行
  2. 将执行函数放到微任务或者宏任务中 --判断浏览器是否支持promise .then;settimeout等等,依次判断异步支持事件。
  3. 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调

参考链接:

  1. (75条消息) vue.nextTick()方法的使用详解(简单明了)_广积粮缓称王的博客-CSDN博客_nexttick ---清晰易懂;有代码演示,简单过一遍
  2. 面试官:Vue中的$nextTick有什么作用? | web前端面试 - 面试官系列 (vue3js.cn) ----结构清晰
  3. Vue中$nextTick源码解析 - 掘金 (juejin.cn) ------了解了vue的DOM的更新是异步执行的
  4. nextTick实现原理,必拿下! - 掘金 (juejin.cn) ---结构清晰,易于理解,还解释了为何需要浅拷贝slice
  5. 为什么 nextTick 中就能拿到 DOM 更新后的结果了_哔哩哔哩_bilibili ---视频过一下