永遠(yuǎn)不要過早優(yōu)化

why？過早優(yōu)化的代價就是開發(fā)時間變長，開發(fā)成本增加，它會慢慢的讓我們的代碼變得不可閱讀，難以維護(hù)；這些都是優(yōu)化帶來的代價。有句話是這樣說的：命運(yùn)饋贈的禮物，早已在暗中標(biāo)好了價格

優(yōu)化的原則就是：因地制宜，見招拆招

使用key（唯一且穩(wěn)定）

對于通過循環(huán)生成的列表，應(yīng)給每個列表項(xiàng)一個 穩(wěn)定且唯一的key，這有利于在列表變動時，盡量少的刪除、新增、改動元素

使用凍結(jié)的對象

凍結(jié)的對象不會被響應(yīng)化，使用Object.freeze(obj)來對一個對象進(jìn)行凍結(jié)， 那如何來看一個對象是否是凍結(jié)對象呢？那就可以通過Object.isFrozen(obj)傳入這個對象，它會返回一個布爾值。

它的應(yīng)用場景是用于展示大批量數(shù)據(jù)的時候，且這些數(shù)據(jù)不需要響應(yīng)式的特性，就可以用凍結(jié)對象來提升渲染性能，減少渲染時間，提升用戶體驗(yàn)。

使用函數(shù)式 組件 （參加函數(shù)式組件）

vue不會為函數(shù)式組件創(chuàng)建實(shí)例，所以能提升性能

使用計(jì)算屬性

如果模板中某個數(shù)據(jù)會使用多次，并且該數(shù)據(jù)是通過計(jì)算得到的，使用計(jì)算屬性來緩存它們

非實(shí)時綁定的表單項(xiàng)

當(dāng)使用 v-model綁定一個表單項(xiàng)時，當(dāng)用戶改變表單項(xiàng)的狀態(tài)時，也會隨之改變數(shù)據(jù)，從而導(dǎo)致vue發(fā)生重渲染（rerender），這會帶來一些性能的開銷。

我們可以通過使用lazy或不適用v-model的方式解決該問題，但要注意，這樣可能會導(dǎo)致在某一時間段內(nèi)數(shù)據(jù)和表單項(xiàng)的值是不一致的。 （v-model.lazy）他不會去監(jiān)聽數(shù)據(jù)的每一次變化，而是監(jiān)聽@change事件，不用lazy的話 監(jiān)聽的是@input事件

保持對象引用穩(wěn)定

在絕大部分情況下，vue觸發(fā)rerender的時機(jī)是其依賴的數(shù)據(jù)發(fā)生變化

若數(shù)據(jù)沒有發(fā)生變化，哪怕給數(shù)據(jù)重新賦值了，vue也是不會做出任何處理的

function hasChanged(x,y) {if(x === y) {return x === 0 && 1 / x !== 1 / y} else {return x === x || y === y      // NaN === NaN   輸出為false}
}

因此，如果需要，只要能保證組件的依賴數(shù)據(jù)不發(fā)生變化，組件就不會重新渲染。

對于原始數(shù)據(jù)類型，保持其值不變即可。

對于對象類型，保持其引用不變即可。

從另一方面來說，由于可以通過保持屬性引用穩(wěn)定來避免子組件的重渲染，那么我們應(yīng)該細(xì)分組件來盡量避免多余的渲染。

使用v-show代替v-if

對于頻繁切換顯示狀態(tài)的元素，使用v-show可以保證虛擬dom樹的穩(wěn)定，避免頻繁的新增和刪除元素，特別是對于那些內(nèi)部包含大量dom元素的節(jié)點(diǎn)，這一點(diǎn)極其重要

**關(guān)鍵字:**頻繁切換顯示狀態(tài)、內(nèi)部包含大量dom元素

使用延遲裝載

JS傳輸完成后，瀏覽器開始執(zhí)行JS構(gòu)造頁面。

但可能一開始要渲染的組件太多，不僅JS執(zhí)行的時間很長，而且執(zhí)行完后瀏覽器要渲染的元素過多，從而導(dǎo)致頁面白屏

一個可行的辦法就是延遲裝載組件，讓組件按照指定的先后順序依次一個一個渲染出來

延遲裝載是一個思路，本質(zhì)上就是利用 requestAnimationFrame事件分批渲染內(nèi)容，它的具體實(shí)現(xiàn)多種多樣

你