说明

官方解释：将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

案例

image.png
image.png
image.png

实现上面的案例我们有三种方式

方式一（错）：在点击按钮后立即获取到h2的高度

image.png
image.png
确实是先添加内容，再打印，但是实际效果是，打印出来的是界面修改前的高度

方式二：在updated生命周期函数中获取h2的高度

onUpdated是在DOM更新后执行
image.png
image.png

能实现，但是不一定合适，因为onUpdated可能还有其他的操作，不只是这个获取的操作，其他操作也会触发这个打印。

现在这个只是1条代码还好，如果是几百行的代码，每次其他操作都会触发这些代码，这样就浪费了性能。

我想要的只是这个元素添加内容时打印高度。

当然你可以加入判断，判断只有我这个元素内容改变时打印，但终究不是最好的方案，毕竟onUpdated是共用的。

方式三：使用nexttick函数

image.png
image.png

把要执行的放在函数里即可，实际原理是，把函数的内容延迟执行，通过Promise实现的，其实就是把函数放在更新DOM的方法执行完后，再执行这个。

Vue内部会维护着好几种队列，为的是方便你按你想要的顺序执行。

源码

image.png
我们修改完数据时，会调用flushJobs这个函数
image.png
里面有个函数，循环执行修改界面的操作（但不触发DOM变更）
image.png
nextTick 就是最后把任务加到上面的最后面
image.png