為什么Vue采用異步渲染呢?

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ì)列。

?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 當(dāng)vue的頁(yè)面需要重新渲染,不僅僅是數(shù)據(jù)的更新,div的高度要變化的時(shí)候就要用nextTick來(lái)重新渲染頁(yè)面。Vu...
    是曹不是蔡閱讀 2,607評(píng)論 0 0
  • 理解:如果不采取異步更新,那么每次更新數(shù)據(jù)都會(huì)對(duì)當(dāng)前組件進(jìn)行重新渲染,為了性能考慮,Vue 會(huì)在本輪數(shù)據(jù)更新后,再...
    玲兒瓏閱讀 328評(píng)論 0 0
  • Vue 和 React 都實(shí)現(xiàn)了異步更新策略。雖然實(shí)現(xiàn)的方式不盡相同,但都達(dá)到了減少 DOM 操作、避免過(guò)度渲染的...
    六個(gè)周閱讀 775評(píng)論 0 7
  • 千方百計(jì)——Event Loop與異步更新策略 Vue 和 React 都實(shí)現(xiàn)了異步更新策略。雖然實(shí)現(xiàn)的方式不盡相...
    旭哥_閱讀 307評(píng)論 1 1
  • 本篇文章主要是對(duì)Vue中的DOM異步更新策略和nextTick機(jī)制的解析,需要讀者有一定的Vue使用經(jīng)驗(yàn)并且熟悉掌...
    wdapp閱讀 759評(píng)論 0 1

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