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

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

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

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

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

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

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

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

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

我們來看操作1：

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

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

我們來看下列操作：

以上操作對數(shù)據(jù)的獲取都沒有問題，都獲取到了更新后的值。

我們在btn()方法里面，更改str的值試試

至此，回答面試題的問題——nextTick是什么？

是用來獲取更新后的dom內容。

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

最新評論