合理使用v-show和 v-if
合理使用computed(緩存)
v-for中加key,避免和v-if同時使用
自定義事件和DOM事件及時銷毀(否則會導(dǎo)致內(nèi)存泄露)
合理使用異步組件(import)
合理使用緩存組件(keep-alive)
合理使用異步渲染($nextTick)
data層級不要太深(導(dǎo)致深度監(jiān)聽時遞歸的次數(shù)比較多)
使用vue-loader在開發(fā)環(huán)境做模板編譯(預(yù)編譯)
使用SSR(服務(wù)端渲染)
1.合理使用v-show和 v-if
v-show和 v-if的區(qū)別:
- v-show通過css display屬性控制申窘,適用頻繁切換
- v-if通過vue本身的機制控制,適用不會頻繁切換
根據(jù)不同場景合理使用
2.合理使用computed(緩存)
計算屬性 computed:
- 支持緩存偶洋,只有依賴數(shù)據(jù)發(fā)生改變,才會重新進行計算;
- 不支持異步悍引,當(dāng)computed內(nèi)有異步操作時無效,無法監(jiān)聽數(shù)據(jù)的變化帽氓;
- computed 屬性值會默認(rèn)走緩存,計算屬性是基于它們的響應(yīng)式依賴進行緩存的浓领,也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計算得到的值
- 如果一個屬性是由其他屬性計算而來的,這個屬性依賴其他屬性联贩,是多對一或者一對一捎拯,一般用computed
- 如果computed屬性屬性值是函數(shù)泪幌,那么默認(rèn)會走get方法署照;函數(shù)的返回值就是屬性的屬性值祸泪;在computed中的建芙,屬性都有一個get和一個set方法,當(dāng)數(shù)據(jù)變化時禁荸,調(diào)用set方法。
詳情見文章 : Vue原理「十八」-- computed和watch的區(qū)別及原理 ***
3.v-for中加key,避免和v-if同時使用
diff算法中通過tag和key判斷是不是sameNode
減少渲染次數(shù)屡限,提升渲染性能
4.自定義事件和DOM事件及時銷毀(否則會導(dǎo)致內(nèi)存泄露)
beforeDestory鉤子函數(shù)中:
解綁自定義事件 event.$off,否則容易造成內(nèi)存泄露
清楚定時器
解綁自定義的DOM事件,window scroll 等
vm.$destroy() 完全銷毀一個實例翰撑,清理與其他實例之間的鏈接啊央,解綁他的全部指令與事件監(jiān)聽器,避免導(dǎo)致內(nèi)存泄露
5.合理使用異步組件(import)
異步組件就是定義的時候什么都不做,只在組件需要渲染(組件第一次顯示)的時候進行加載渲染并緩存瓜饥,緩存是以備下次訪問。
Vue實現(xiàn)按需加載:
import() 函數(shù),按需加載乓土,異步加載大組件
詳情見文章 : Vue高級特性「七」--動態(tài)組件\異步組件***
6.合理使用緩存組件(keep-alive)
keep-alive 緩存組件溯警,不需要重復(fù)渲染狡相,(被包裹在keep-alive中的組件的狀態(tài)將會被保留)
應(yīng)用場景:
頻繁切換,不需要重復(fù)渲染(tab切換)尽棕,如果標(biāo)簽簡單可以使用 v-show
詳情見文章 : Vue高級特性「八」--keep-alive 緩存組件 ***
7.合理使用異步渲染($nextTick)
異步渲染(以及合并data修改),以提高渲染性能
$nextTick在DOM更新后伊诵,觸發(fā)回調(diào)