Vue.nextTick核心原理

相信大家在写vue项目的时候，一定会发现一个神奇的api，Vue.nextTick。为什么说它神奇呢，那是因为在你做某些操作不生效时，将操作写在Vue.nextTick内，就神奇的生效了。那这是什么原因呢？

让我们一起来研究一下。

简述

• vue 实现响应式并不是数据发生变化后 DOM 立即变化，而是按照一定策略异步执行 DOM 更新的* vue 在修改数据后，视图不会立刻进行更新，而是要等同一事件循环机制内所有数据变化完成后，再统一进行DOM更新* nextTick 可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM。事件循环机制
  ======

在讨论Vue.nextTick之前，需要先搞清楚事件循环机制，算是实现的基石了，那我们来看一下。

在浏览器环境中，我们可以将我们的执行任务分为宏任务和微任务,

• 宏任务： 包括整体代码script，setTimeout，setInterval 、setImmediate、 I/O 操作、UI 渲染
• 微任务： Promise.then、MuationObserver

事件循环的顺序，决定js代码的执行顺序。事件循环如下：

用代码解释，浏览器中事件循环的顺序同如下代码：

for (macroTask of macroTaskQueue) { // 1. 执行一个宏任务handleMacroTask();// 2. 执行所有的微任务for (microTask of microTaskQueue) { handleMicroTask(microTask);}
 } 

vue数据驱动视图的处理（异步变化DOM）

<template><div><div>{
  {count}}</div><div @click="handleCli