Vue.nextTick()的正确使用

什么是Vue.nextTick()官方文档解释如下：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM
，获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题，所以就衍生出了这个获取更新后的DOM
的Vue方法。所以放在Vue.nextTick()
回调函数中的执行的应该是会对DOM进行操作的 js代码，比如Swiper
扩展包的

<code class = "javascript">
var swiper = new Swiper( '.swiper-container', {                   
 pagination: '.swiper-pagination',                    
 nextButton: '.swiper-button-next',                    
 prevButton: '.swiper-button-prev',                    
 paginationClickable: true,                   
 spaceBetween: 30,                   
 centeredSlides: true,                   
 autoplay: 2500,                   
 autoplayDisableOnInteraction: false               
});
</code>

什么时候需要用的Vue.nextTick()你在Vue生命周期的created()
钩子函数进行的DOM操作一定要放在Vue.nextTick()
的回调函数中。原因是什么呢，原因是在created()
钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted
钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()
的回调函数中