nextTick

Vue.nextTick是Vue官方給我們提供的一個(gè)API(方法),作用是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法,獲取更新后的DOM;

那么我們的理解是:當(dāng)數(shù)據(jù)發(fā)生變化之后,DOM視圖并不會(huì)立即更新,如果我們?cè)诎l(fā)生變化之后立馬去獲取某個(gè)節(jié)點(diǎn)或者某個(gè)節(jié)點(diǎn)的值,很有可能結(jié)果就是undefined;因?yàn)閂ue實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后DOM立即變化,而是按一定的策略進(jìn)行DOM的更新;

應(yīng)用場(chǎng)景:

在vue的生命周期鉤子函數(shù)created()中進(jìn)行DOM操作的時(shí)候一定要把DOM操作放入到this.$nextTick()中;

因?yàn)樵赾reated鉤子函數(shù)觸發(fā)的時(shí)候,DOM是沒(méi)有進(jìn)行渲染的;DOM沒(méi)有進(jìn)行渲染,然后進(jìn)行DOM操作無(wú)疑是徒勞的;

所以我們?cè)赾reated中進(jìn)行DOM操作的時(shí)候,一定要將DOM操作放入到this.$nextTick()中;

與之相反的是mounted,因?yàn)楫?dāng)觸發(fā)mounted的時(shí)候,DOM的掛載和渲染都已經(jīng)完成了,所以在mounted中進(jìn)行DOM操作是不會(huì)有任何問(wèn)題的;

因?yàn)镈OM更新是異步的,像v-if指令判斷增刪DOM元素,我們?cè)诜椒ㄖ薪o變量賦值的時(shí)候,如果不使用this.$nextTick(),我們很有可能拿到的還是初始值,如果想拿到更新后的值,需要使用this.$nextTick()方法

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容