3个 Vue nextTick 原理的关键点

大家好,我是大澈!一个喜欢结交朋友的老程序员👨🏻💻,关注我,科技未来或许我能帮到你!

我们都知道,Vue nextTick 的作用,就是确保在 DOM 更新完成后再执行某些操作,比如:读取 DOM 的最新状态 或 进行依赖 DOM 的逻辑处理。

那它背后的工作原理,你知道吗?

下面大澈带你,针对 nextTick 工作原理的 3 个关键点,展开聊一聊!

一、异步DOM更新

这一点算是一个前提条件。

由于 Vue 在响应式数据变化时,会进行异步的 DOM 更新,所以直接修改数据后,DOM 并不会立即反映出变化。

此时,我们可以在这个异步 DOM 更新等待的时机中,去做一些事情,比如:调用 nextTick 方法。

二、回调队列

在 nextTick 的实现中,会把传入的回调函数存入一个队列中。

如果在同一轮更新中多次调用 nextTick,所有的回调会在同一个异步任务中依次执行,保证只触发一次 DOM 更新。

三、异步任务调度

为了确保在 DOM 更新完成后立即执行回调,Vue 会选择尽可能快的异步任务机制。

常见的实现策略有:Promise、MutationObserver、setTimeout。

在 nextTick 的实现中,是利用 Promise.resolve().then() 来创建微任务。因为微任务在当前执行栈清空后就会执行,能更快地响应 DOM 变化。

其它两种实现方式,速度略慢,只是作为备选方案。

好了,今天要分享的内容就是这么多,联系和更多内容在绿色App搜【程序员大澈】,最后感谢朋友们给个点赞、分享、推荐,拜拜~

相关推荐
瘦的可以下饭了24 分钟前
Day01-API
javascript
Nan_Shu_6141 小时前
学习:Vue (2)
javascript·vue.js·学习
北辰alk1 小时前
Vue项目Axios封装全攻略:从零到一打造优雅的HTTP请求层
vue.js
老华带你飞2 小时前
出行旅游安排|基于springboot出行旅游安排系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring·旅游
一水鉴天3 小时前
整体设计 定稿 之24+ dashboard.html 增加三层次动态记录体系仪表盘 之2 程序 (Q208 之2)
开发语言·前端·javascript
JIngJaneIL3 小时前
基于Java饮食营养管理信息平台系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
老华带你飞3 小时前
垃圾分类|基于springboot 垃圾分类系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring
二狗哈3 小时前
Cesium快速入门17:与entity和primitive交互
开发语言·前端·javascript·3d·webgl·cesium·地图可视化
GISer_Jing4 小时前
AI驱动营销增长:7大核心场景与前端实现
前端·javascript·人工智能
星光不问赶路人4 小时前
new Array() 与 Array.from() 的差异与陷阱
javascript·面试