vue.nextTick()学习

昨天提交的代码听说出问题了，我感觉应该是svn冲突的问题，二话不说，今天回公司改bug，本来说好的，去我大姐哪里，结果也去不成，公司还要考试，必须要学习公司官网上的视频。

最近一直在改bug，今天差点被网速气死，下一个插件下到了5:00

也是牛逼啊

终于把bug改完了。

Vue.nextTick()的正确使用
什么是Vue.nextTick()官方文档解释如下：

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

我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM

，获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题，所以就衍生出了这个获取更新后的DOM

的Vue方法。所以放在Vue.nextTick()

回调函数中的执行的应该是会对DOM进行操作的 js代码，比如Swiper

扩展包的

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               
});

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()

钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。

原因是什么呢，原因是在created()

钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

与之对应的就是mounted钩子函数，

因为该钩子函数执行时所有的DOM挂载和渲染都已完成，

此时在该钩子函数中进行任何DOM操作都不会有问题 。

在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中