nextTick：在下一次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。它有两个参数：第一个参数是回调函数，不传时提供promise调用；第二个参数是执行环境上下文，不传默认是自动绑定到调用它的实例上。我们可以看出nextTick就是一个方法，方法有两个参数：fn和this，fn就是需要传的回调函数，this就是所说的执行环境上下文。那么问题来了，在Vue中是如何实现在下一次DOM更新结束之后才会执行延迟回调的？从上面例子中，在created生命周期中操作了DOM，但是我们都知道created生命周期只是初始化了数据，这期间是还没有渲染DOM的，如果我们直接操作DOM是找不到DOM元素的，那么问题来了：为什么放在nextTick中就可以获取到了DOM元素呢？ 这不是很明显吗，等到DOM渲染完才调用不就获取到了吗，从而知道了nextTick作用就是用来等下次DOM渲染完才去调用nextTick内的DOM操作代码。那么问题又来了，nextTick究竟做了什么？下面我们一起从源码层面来分别分析Vue2和Vue3版本的nextTick原理是啥。
Vue2版本的nextTick
由于Vue暴露给开发者的是nextTick这个方法，在这个方法中主要做了三件事，回调函数的添加、延迟执行回调函数、判断当前的nextTick是否传入回调函数。不传的话，是一个Promise，this.$nextTick.then(()=>{})，按Promise处理.
Vue3版本就没有Vue2版本的那么多环境支持，nextTick封装成了一个Promise异步回调函数执行。
nextTick可以通俗的当作一个Promise，所以nextTick属于微任务。
nextTick在页面更新数据后，DOM更新，可以通俗理解为，nextTick就是用来支持操作DOM的代码及时更新渲染页面。也就是在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
更多技术分享，请持续关注云和数据！
Vue2版本的nextTick
由于Vue暴露给开发者的是nextTick这个方法，在这个方法中主要做了三件事，回调函数的添加、延迟执行回调函数、判断当前的nextTick是否传入回调函数。不传的话，是一个Promise，this.$nextTick.then(()=>{})，按Promise处理.
Vue3版本就没有Vue2版本的那么多环境支持，nextTick封装成了一个Promise异步回调函数执行。
nextTick可以通俗的当作一个Promise，所以nextTick属于微任务。
nextTick在页面更新数据后，DOM更新，可以通俗理解为，nextTick就是用来支持操作DOM的代码及时更新渲染页面。也就是在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
更多技术分享，请持续关注云和数据！
