vue中this.$nextTick()的原理

首先我们来了解下Vue在数据变化时的渲染原理

在Vue中，当数据发生变化的时候，watcher会接到通知，进而触发虚拟DOM进行重新渲染。根据vue变化侦测的规则（不了解的可以看下关于vue响应式原理这篇文章https://blog.csdn.net/ninerwsx/article/details/126977586），数据的变化只会通知到组件的watcher，之后虚拟DOM会对整个组件进行比对就是diff算法。但是如果在一次事件循环中此组件的数据有三个改动了，是重新渲染三次吗？当然不是，是当此轮事件循环结束后，虚拟DOM才会对整个组件重新渲染。

说的通俗一点，如果你一次事件循环中顺序修改了data1,data2,data3三个数据，当data1改完之后会立刻渲染吗，不会，要等到data3改完，一起渲染！所以我们在开发过程中会遇到一种问题：就是在某个数据改变后，需要对DOM进行一些操作（比如，更改类名，获取盒子的宽高样式），切记是对DOM操作需要如此，不基于DOM的不需要。

原理： 将回调延迟到下次DOM更新周期之后执行。

说的通俗一些就是，我们在修改数据后，使用了this.$nextTick(),会立刻获取更新后的DOM，再执行this.$nextTick()里面的内容。

下次DOM更新周期是什么哪个时间节点呢？是下次执行微任务时！

注意：无论时更新DOM还是this.$nextTick()中的回调函数，都是像微任务队列中添加，所以注意顺序，如果想要再this.$nextTick()的回调函数中利用更新的DOM，那么就要注意顺序，先修改数据再用this.$nextTick()。