什么是Vue.nextTick()官方文檔解釋如下：
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)诵闭。在修改數(shù)據(jù)之后立即使用這個(gè)方法乖菱，獲取更新后的 DOM辰斋。
我理解的官方文檔的這句話的側(cè)重點(diǎn)在最后那半句獲取更新后的DOM
铸屉，獲取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出問(wèn)題，所以就衍生出了這個(gè)獲取更新后的DOM
的Vue方法岖妄。所以放在Vue.nextTick()
回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會(huì)對(duì)DOM進(jìn)行操作的 js代碼型将，比如Swiper
擴(kuò)展包的
<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>
什么時(shí)候需要用的Vue.nextTick()你在Vue生命周期的created()
鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()
的回調(diào)函數(shù)中。原因是什么呢荐虐，原因是在created()
鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染七兜，而此時(shí)進(jìn)行DOM操作無(wú)異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()
的回調(diào)函數(shù)中福扬。與之對(duì)應(yīng)的就是mounted
鉤子函數(shù)腕铸，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問(wèn)題 铛碑。
在某個(gè)動(dòng)作有可能改變DOM元素結(jié)構(gòu)的時(shí)候狠裹，對(duì)DOM一系列的js操作都要放進(jìn)Vue.nextTick()
的回調(diào)函數(shù)中
