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

目录

前言

$nextTick()的概念

$nextTick()的用法和原理

1、$nextTick()用法

2、$nextTick()原理

$nextTick()的具体使用示例

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

最后

---

前言

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

$nextTick()的概念

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

众所周知，Vue是异步执行DOM更新，通过数据劫持结合发布者--订阅者模式的数据双向绑定来观察数据变化，如果数据发生变化就会开启一个队列，且watcher会被触发多次，只会推送到队列一次，但在下次事件循环的时候会清空队列并进