Vue开发必备：$nextTick方法的理解与实战场景

一、NextTick是什么

1、官方对其的定义

在Vue.js中，$nextTick是一个特别的方法，用于在DOM更新完成后执行延迟回调。在修改数据之后，可以使用此方法来等待DOM更新。等DOM更新完成之后，会回调指定的函数。

2、什么意思呢？

我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。

3、举个例子

有一个div，默认用 v-if 将它隐藏，点击一个按钮后，改变 v-if 的值，让它显示出来，同时拿到这个div的文本内容。

如果v-if的值是 false，直接去获取div内容是获取不到的，因为此时div还没有被创建出来，

那么在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取。

示例代码如下：

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        showDiv : false
        },
    methods:{
        getText:function(){
            this.showDiv = true;
            var text = document.getElementById('div').innnerHTML;
             console.log(text);
        }
    }
})
</script>

这段代码并不难理解，但是运行后在控制台会抛出一个错误：Cannot read property 'innnerHTML of null，意思就是获取不到div元素。

二、实现原理

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所以数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。

所以如果你用一个for循环来动态改变数据100次，其实它只会应用最后一次改变，如果没有这种机制，DOM就要重绘100次，这固然是一个很大的开销。所以nextTick本质是一种优化策略。

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver，如果都不支持，就会采用setTimeout代替。

知道了Vue异步更新DOM的原理，上面示例的报错也就不难理解了。

事实上，在执行this.showDiv = true时，div仍然还是没有被创建出来，直到下一个vue事件循环时，才开始创建。

$nextTick就是用来知道什么时候DOM更新完成的。

所以上面的示例代码需要修改为：

getText:function(){
    this.showDiv = true;
    this.$nextTick(function(){
          var text = document.getElementById('div').innnerHTML;
         console.log(text);  
    });
}

这时再点击事件，控制台就打印出div的内容“这是一段文本“了。

理论上，我们应该不用去主动操作DOM，因为Vue的核心思想就是数据驱动DOM，但在很多业务里，我们避免不了会使用一些第三方库，比如 popper.js、swiper等，这些基于原生javascript的库都有创建和更新及销毁的完整生命周期，与Vue配合使用时，就要利用好$nextTick。

三、使用场景

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()。

• 第三方插件，在vue生成的某些dom动态发生变化时重新应用该插件。
  
• 视图更新之后，基于新的视图进行操作。
  
• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。