2024年最新浅谈Vue种的$nextTick机制(1)，快手前端面试经验

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill

DOM循环更新

首先,Vue实例实现响应式并不是在数据改变之后就立即更新DOM,而是在一次循环的所有数据变化后再异步执行DOM更新

在这里简单总结一下事件循环

同步代码执行=>查找异步队列,进入执行栈,执行Callback1[事件循环1]=>查找异步队列,进入执行栈,执行Callback[事件循环2]=>…

即每一次异步的Callback都会再独立形成一次事件循环

因此我们可以推出nextTick的触发机制

一次循环种的所有代码执行完毕 = > DOM更新 = > 触发nextTick的回调Callback = > 进入下一次循环

下面来个例子,帮助更好的理解nextTick机制

{{content}}

在nextTick执行前获取内容:{{content1}}

在nextTick执行之后获取内容:{{content2}}

在nextTick执行前获取内容:{{content3}}

打开网页后,我们可以发现结果为:

After NextTick

在nextTick执行前获取内容:Before NextTick

在nextTick执行之后获取内容:After NextTick

在nextTick执行前获取内容:Before NextTick

总结:

首先是在changeContent方法中对content进行了更改

虽然content1和content3获取内容都是再content数据更改之后的,但是它们属于同一个事件循环,因此content1和content3获取的还是’ Before NextTick ', 而content2获取内容的语句写在nextTick的回调中,在DOM更新之后执行,所以能够获取到更新后的 ’ After NextTick ’
最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它