Vue 是組件級(jí)更新,如果不采用異步更新,那么每次更新數(shù)據(jù)都會(huì)對(duì)當(dāng)前組件進(jìn)行重新渲染,所以為了性能, Vue 會(huì)在本輪數(shù)據(jù)更新后,在異步更新視圖。這也是nextTick 產(chǎn)生的原因。異步渲染核心思想是 nextTick 。
作用:
nextTick 接收一個(gè)回調(diào)函數(shù)作為參數(shù),并將這個(gè)回調(diào)函數(shù)延遲到DOM更新后才執(zhí)行,減少操作DOM的次數(shù),;
使用場(chǎng)景:想要操作 基于最新數(shù)據(jù)生成的DOM 時(shí),就將這個(gè)操作放在 nextTick 的回調(diào)中;
實(shí)現(xiàn)原理
將傳入的回調(diào)函數(shù)包裝成異步任務(wù),異步任務(wù)又分微任務(wù)和宏任務(wù)(setTimeout、promise那些),定義了一個(gè)異步方法,多次調(diào)用nextTick會(huì)將方法存入隊(duì)列,通過(guò)異步方法清空當(dāng)前隊(duì)列。