前端开发：$nextTick()的使用及原理

目录

前言

$nextTick()的概念

$nextTick()的用法和原理

1、$nextTick()用法

2、$nextTick()原理

$nextTick()的具体使用示例

拓展：面试中考察$nextTick()的底层原理

最后

---

前言

在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。那么本篇博文就来分享一下关于$nextTick()的使用及原理，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，总结记录一下，方便后期查阅使用。

$nextTick()的概念

在前端领域，$nextTick()其实就是一个延迟回调，在第一时间获取更新后的DOM；也就是说，Vue在更新DOM时是异步执行的，即当数据发生变化时，Vue将开启一个异步更新的队列，当视图的数据变化完成之后，再统一进行更新的处理。

众所周知，Vue是异步执行DOM更新，通过数据劫持结合发布者--订阅者模式的数据双向绑定来观察数据变化，如果数据发生变化就会开启一个队列，且watcher会被触发多次，只会推送到队列一次，但在下次事件循环的时候会清空队列并进行DOM的更新，在Vue内部会尝试对异步队列使用原生的promise.then和MutationObserver，若当前执行环境不支持该操作会采用setTime(()=> {} , 0)代替。若某一个DOM不会马上更新，而是会在下一个事件循环的时候才会更新，但是这个时候需要该DOM进行某些操作，此时就可以通过使用$