Vue性能「十九」-- Vue常見優(yōu)化方式 ***

合理使用v-show和 v-if
合理使用computed(緩存)
v-for中加key,避免和v-if同時(shí)使用
自定義事件和DOM事件及時(shí)銷毀(否則會(huì)導(dǎo)致內(nèi)存泄露)
合理使用異步組件(import)
合理使用緩存組件(keep-alive)
合理使用異步渲染($nextTick)
data層級(jí)不要太深(導(dǎo)致深度監(jiān)聽時(shí)遞歸的次數(shù)比較多)
使用vue-loader在開發(fā)環(huán)境做模板編譯(預(yù)編譯)
使用SSR(服務(wù)端渲染)

1.合理使用v-show和 v-if

v-show和 v-if的區(qū)別:

  • v-show通過(guò)css display屬性控制,適用頻繁切換
  • v-if通過(guò)vue本身的機(jī)制控制,適用不會(huì)頻繁切換
    根據(jù)不同場(chǎng)景合理使用

2.合理使用computed(緩存)

計(jì)算屬性 computed:

  • 支持緩存,只有依賴數(shù)據(jù)發(fā)生改變,才會(huì)重新進(jìn)行計(jì)算;
  • 不支持異步,當(dāng)computed內(nèi)有異步操作時(shí)無(wú)效,無(wú)法監(jiān)聽數(shù)據(jù)的變化;
  • computed 屬性值會(huì)默認(rèn)走緩存,計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的,也就是基于data中聲明過(guò)或者父組件傳遞的props中的數(shù)據(jù)通過(guò)計(jì)算得到的值
  • 如果一個(gè)屬性是由其他屬性計(jì)算而來(lái)的,這個(gè)屬性依賴其他屬性,是多對(duì)一或者一對(duì)一,一般用computed
  • 如果computed屬性屬性值是函數(shù),那么默認(rèn)會(huì)走get方法;函數(shù)的返回值就是屬性的屬性值;在computed中的,屬性都有一個(gè)get和一個(gè)set方法,當(dāng)數(shù)據(jù)變化時(shí),調(diào)用set方法。

詳情見文章 : Vue原理「十八」-- computed和watch的區(qū)別及原理 ***

3.v-for中加key,避免和v-if同時(shí)使用

diff算法中通過(guò)tag和key判斷是不是sameNode
減少渲染次數(shù),提升渲染性能

4.自定義事件和DOM事件及時(shí)銷毀(否則會(huì)導(dǎo)致內(nèi)存泄露)

beforeDestory鉤子函數(shù)中:
解綁自定義事件 event.$off,否則容易造成內(nèi)存泄露
清楚定時(shí)器
解綁自定義的DOM事件,window scroll 等

vm.$destroy() 完全銷毀一個(gè)實(shí)例,清理與其他實(shí)例之間的鏈接,解綁他的全部指令與事件監(jiān)聽器,避免導(dǎo)致內(nèi)存泄露

5.合理使用異步組件(import)

異步組件就是定義的時(shí)候什么都不做,只在組件需要渲染(組件第一次顯示)的時(shí)候進(jìn)行加載渲染并緩存,緩存是以備下次訪問(wèn)。

Vue實(shí)現(xiàn)按需加載:

import() 函數(shù),按需加載,異步加載大組件

詳情見文章 : Vue高級(jí)特性「七」--動(dòng)態(tài)組件\異步組件***

6.合理使用緩存組件(keep-alive)

keep-alive 緩存組件,不需要重復(fù)渲染,(被包裹在keep-alive中的組件的狀態(tài)將會(huì)被保留)
應(yīng)用場(chǎng)景:
頻繁切換,不需要重復(fù)渲染(tab切換),如果標(biāo)簽簡(jiǎn)單可以使用 v-show

詳情見文章 : Vue高級(jí)特性「八」--keep-alive 緩存組件 ***

7.合理使用異步渲染($nextTick)

異步渲染(以及合并data修改),以提高渲染性能
$nextTick在DOM更新后,觸發(fā)回調(diào)

8.data層級(jí) 不要太深(導(dǎo)致深度監(jiān)聽時(shí)遞歸的次數(shù)比較多)

9.使用vue-loader在開發(fā)環(huán)境做模板編譯(預(yù)編譯)

10.使用SSR(服務(wù)端渲染)

?著作權(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)容

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