Vue nextTick原理和作用(nextTick怎么使用)

要知道Vue nextTick的原理和作用，首先就要清楚Vue nextTick是什么？通俗易懂的讲：Vue nextTick是一个获取更新后DOM的Vue方法；nextTick方法是将回调函数延迟在下一次dom更新数据后调用，也就是当数据更新了，然后在dom中渲染后，就会自动执行nextTick函数。

一、Vue nextTick是什么

1、Vue文档中对nextTick关于nextTick的介绍官网的解释如下：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

2、通俗易懂的讲：Vue nextTick是一个获取更新后DOM的Vue方法；nextTick方法是将回调函数延迟在下一次dom更新数据后调用，也就是当数据更新了，然后在dom中渲染后，就会自动执行nextTick函数。

二、Vue nextTick原理

通俗易懂的讲Vue nextTick的实现原理，简单说说面试的时候可以拿去吹牛逼。

1、先定义了一个callbacks 存放所有的nextTick里的回调函数

2、然后判断一下当前的浏览器内核是否支持 Promise，如果支持，就用Promise来触发回调函数

3、如果不支持Promise再看看是否支持MutationObserver，是一个可以监听DOM结构变化的接口，观察文本节点发生变化时，触发执行所有回调函数。

4、如果以上都不支持就只能用setTimeout来完成异步执行了。

三、Vue nextTick的作用

要理解nextTick，就要理解dom，nextTick是解决dom没有渲染的时候，无法做一些操作，我们想在dom完成后执行的。

比如你有一个标签用了<MyComp ref="mycomp" v-if="showComp"></MyComp>

然后你有一个函数设置了this.showComp=true

这个时候假如你使用this.$refs.mycomp去获取组件，获取的是空值，因为刚才showComp还是false，刚刚才设置成true，dom还没来得及加载。这个时候我们就需要使用nextTick函数。

四、Vue nextTick怎么使用

比如下面这个Vue nextTick实例代码：

this.showComp=true;
this.$nextTick(()=>{
this.$refs.mycomp.refresh();
});

五、Vue nextTick使用情景

在Vue生命周期的created()钩子函数进行的DOM操作的时候需要要放在Vue.nextTick()的回调函数中。

为啥呢？如果不熟悉created()钩子的话可以再翻看一下Vue的生命周期，created函数执行的时候DOM元素还没有进行过渲染，这个时候操作DOM毛用也没有，所以需要将DOM操作放在Vue.nextTick()的回调方法中去搞定。

当然你可以选择在mounted()钩子里去操作DOM，这个时候所有的DOM都挂载到跟元素上并渲染完毕了。这个时候操作DOM元素是没有任何问题的。

数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。