NextTick 在 Vue 中如何发挥作用的?其实大部分人一知半解

开发 前端
nextTick 为什么是微任务,但是能获取到最新DOM呢?因为到了 nextTick 这一步的时候,DOM树已经更新完了,只是还没渲染到页面上而已,而我们能通过DOM的一些API去获取到最新的DOM树内容,比如 document.getElementById 这类方法。

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

背景

我发现很多人背八股文真的背傻了,只知道 nextTick = 微任务,其他啥都不知道,也不去了解原因,甚至大部分理解的都是错的?

先来回顾下nextTick的使用,因为 Vue 的响应式变量是异步更新DOM的,所以当你变量修改的时候,并不能第一时间拿到最新的 DOM,而在nextTick中就可以拿到最新的 DOM

图片图片

先问是不是,再问为什么

很多人认为 nextTick = 微任务,这其实是错的,正确应该是 nextTick 优先是 微任务,不信可以直接看 Vue 的源码

在src\core\util\next-tick.ts 文件中,可以看到 nextTick 优先级如下:

  • Promise.resolve().then:微任务
  • MutationObserver:宏任务
  • setImmediate:宏任务
  • setTimeout:宏任务

图片图片

所以说 nextTick 只是优先选择微任务而已,当浏览器不支持微任务的时候,它还是会选择宏任务

为啥优先微任务?

2023年面试了怎么也得有100个人了,大部分都不能比较好的回答这个问题:nextTick为啥优先选择微任务?

首先声明一个点:Vue 的异步更新DOM 其实也是微任务,比如下面的例子,你一次性更新了三次变量,其实会生成三个更新DOM微任务到队列中

图片图片

你这个时候放一个 nextTick 在后面,那就是在三个微任务后面再放一个微任务而已

图片图片

我们都知道微任务是在UI渲染之前执行的,那为什么 nextTick 能拿到最新的 DOM 呢?

图片图片

更新 ≠ 渲染

其实我们要明白一个点:更新 ≠ 渲染,前面三个更新微任务只是更新DOM,修改的是DOM树,而使用 document.getElementById这类方法去获取到的就是DOM树的内容

图片图片

所以 nextTick 为什么是微任务,但是能获取到最新DOM呢?因为到了 nextTick 这一步的时候,DOM树已经更新完了,只是还没渲染到页面上而已,而我们能通过DOM的一些API去获取到最新的DOM树内容,比如 document.getElementById 这类方法

所以,与其说 nextTick 能获取到最新的DOM,还不如说 nextTick 能获取到最新的DOM树信息

责任编辑:武晓燕 来源: 前端之神
相关推荐

2022-01-16 20:25:57

WebAssembly网络

2021-05-06 10:26:49

稳定币加密货币

2022-02-20 21:44:29

软件系统架构

2020-06-17 14:13:29

索引数据库场景

2021-10-18 11:42:23

数据系统权衡

2020-03-09 09:56:13

高并发高可用架构

2022-11-16 12:48:38

2021-03-26 00:20:34

NFT区块链数据库

2020-02-04 18:27:38

人工智能伦理学一知半解

2022-01-26 09:53:23

计算机体系结构

2016-12-12 18:45:08

Data Mining大数据

2020-07-03 08:54:32

云计算混合云公共云

2012-06-07 16:16:43

JavaScript

2018-11-25 21:53:10

人工智能AI开发者

2021-08-17 08:00:00

自然语言人工智能机器学习

2023-10-10 11:27:23

人工智能智能办公

2018-10-16 10:13:06

2022-03-28 13:25:51

AI数据中心耗电量

2020-04-20 13:27:20

传感器可穿戴技术医疗保健

2016-10-26 10:23:42

点赞
收藏

51CTO技术栈公众号