1、nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對(duì)數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法。

2、Vue在更新DOM時(shí)是異步執(zhí)行的。只要監(jiān)聽到數(shù)據(jù)變化，Vue將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè)watcher被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和DOM操作是非常重要的。nextTick方法會(huì)在隊(duì)列中加入一個(gè)回調(diào)函數(shù)，確保該函數(shù)在前面的DOM操作完成后才調(diào)用。

3、所以當(dāng)我們想在修改數(shù)據(jù)后立即看到DOM執(zhí)行結(jié)果就需要用到nextTick方法。

4、比如，在干什么的時(shí)候就會(huì)使用nextTick，傳一個(gè)回調(diào)函數(shù)進(jìn)去，在里面執(zhí)行DOM操作即可。

5、 簡(jiǎn)單了解nextTick實(shí)現(xiàn)，它會(huì)在callbacks里面加入我們傳入的函數(shù)，然后用timerFunc異步方式調(diào)用它們，首選的異步方式會(huì)是Promise。這讓我明白為什么可以在nextTick中看到DOM操作的結(jié)果。

有這樣一道面試題：nextTick是什么？

我們做如下實(shí)驗(yàn)，在磁盤任意的位置(確保今后可以想起來(lái))，新建nextTick文件夾(可以命名為其他的)。

通過(guò)命令vue create demo創(chuàng)建以demo命名的vue2項(xiàng)目。

為了方便調(diào)試項(xiàng)目，我們通過(guò)VS Code打開創(chuàng)建的vue2項(xiàng)目demo。

我們來(lái)看操作1：

created(),mounted()按先后順序同步執(zhí)行(同步執(zhí)行可不是同時(shí)執(zhí)行，而是按順序執(zhí)行。異步，是同時(shí)進(jìn)行各自任務(wù)。)，可以看到先打印了11,而后在mounted()里打印了22。

接著打印了created()里面的333,mounted()的444。這兩個(gè)怎么也按順序打印輸出了呢？

我們來(lái)看下列操作：

以上操作對(duì)數(shù)據(jù)的獲取都沒(méi)有問(wèn)題，都獲取到了更新后的值。

我們?cè)赽tn()方法里面，更改str的值試試

至此，回答面試題的問(wèn)題——nextTick是什么？

是用來(lái)獲取更新后的dom內(nèi)容。

到此這篇關(guān)于解析VUE中nextTick的文章就介紹到這了,更多相關(guān)vue中nexttick內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論