Vue 性能革命：揭秘前端優化的終極技巧；Vue優化技巧，解決Vue項目卡頓問題

Vue優化路徑

一、使用key

二、使用凍結對象

三、使用函數式組件

四、使用計算屬性

五、使用非實時綁定的表單項

六、保持對象引用穩定

6.1、保持對象引用穩定定義

6.2、保持對象引用穩定與不穩定的例子

6.3、vue2判斷數據是否變化是通過hasChanged函數實現的

①為什么在x === y成立的時候，還要做一個return x === 0 && 1 / x !== 1 / (y as number)的判斷？

②為什么在 x === y 不成立的時候，還要做一個x === x || y === y的判斷？

七、使用v-show替代v-if

八、使用延遲裝載（defer）

九、使用keep-alive

十、長列表優化

十一、打包體積優化

十二、總結與相關資源

Vue優化路徑

一、使用key

????????也就是使用v-for這樣通過循環生成的列表，應給每個列表項一個穩定且唯一的key，這樣有利于在列表變動時，盡量少的刪除、新增、改動元素。

二、使用凍結對象

????????在不需要改動的數據時（比如只讀的數據：面向顧客的商品列表等），將對象凍結。例如：

var obj = { a : 1, b : 2}Object.freeze(obj)obj.a = 3 // 無效，obg.a依然為1// 此時obj的屬性無法訪問，自然也無法通過Object.defineProperty來實現響應式Object.isFrozen(obj) // 返回true，檢查是否凍結

????????凍結的對象不會被響應化，節約了observe該對象每個屬性的資源（添加getter和setter）

? ? ? ? 舉一個例子，可以做一個demo實際體驗一下效率的區別，做個頁面放兩個按鈕，分別綁定loadFrozenDatas和loadNormalDatas方法，就能明顯感受到生成同樣的數據，凍結的對象生成速度顯著快于不凍結的對象生成。

data() {return{normalDatas: [],freezeDatas: [],};
},
methods: {loadNormalDatas(){this.normalDatas = this.getDatas(); console.log("normalDatas", this.normalDatas);},loadFrozenDatas() {this.freezeDatas = Object.freeze(this.getDatas()); console.log("freezeDatas", this.freezeDatas);},getDatas(){const result = [];for (var i = 0; i < 1000000; i++) {result.push({id: i,name:`name${i}`,address:{city:`city${i}`,province:`province${i}`,},});}return result;},
}

observe中會調用Object.defineProperty（），通過屬性描述符為對象的每個屬性實現響應式

屬性描述符詳情請看：屬性描述符初探——Vue實現數據劫持的基礎

三、使用函數式組件

????????在Vue.js中，函數式組件是一種沒有狀態和實例的概念的組件。函數式組件主要用于聲明性地描述UI，它們接受 props 作為輸入，并返回一個Vue元素樹作為輸出。

????????函數式組件不會通過new VueComponent生成新的vue實例，不會加入到vue的組件樹中，只做頁面渲染，節省性能。

// Vue 2中的函數式組件:Vue.component('my-functional-component', {functional: true,render: function (createElement, context) {// 使用createElement創建元素return createElement('div', context.props.text);}
});// Vue 3中的函數式組件：import { h, FunctionalComponent } from 'vue';const MyFunctionalComponent: FunctionalComponent = (props, { slots }) => {return h('div', props.text, slots().default);
};export default MyFunctionalComponent;

四、使用計算屬性

????????計算屬性可以緩存（只有所依賴的數據變化了才會重新計算），如果模版中數據會使用多次，就可以使用計算屬性。

五、使用非實時綁定的表單項

????????雙向綁定會導致任意一端修改數據均會導致重渲染rerender，在不需要雙向綁定的位置（比如只開放只讀數據）或者不需要保持實時數據雙向綁定的情況下（比如輸入框內容和頁面某元素綁定，輸入過程中每按一次鍵盤都會導致一次重新渲染）不使用v-model。

? ? ? ? 也可以通過v-model.lazy來允許某一時間內數據與表單內容不一致，也就是從監聽@input變成了監聽@change。

六、保持對象引用穩定

6.1、保持對象引用穩定定義

????????大多數情況下，vue觸發重渲染的時機是依賴數據發生變化的時機，若數據沒有變化，哪怕重新給數據賦值，vue也不會做出反應。

? ? ? ? 因此，哪怕讀取屬性所屬的對象值沒變，但是引用變了，也會導致頁面重新渲染。?

6.2、保持對象引用穩定與不穩定的例子

????????現在頁面上渲染了一個表格，由一系列對象數據生成。如果要在數據庫增加一行。那么讀取數據庫增加的數據，并將其添加到現有的表格數據中，效率會比直接從數據庫讀取全部數據，然后賦值給表格綁定的數據上要高。

? ? ? ? 因為讀取增加的數據，然后修改表格綁定的數據，只有變化的數據會重新渲染，原先有的表格行不會重渲染，可如果直接把增加后的全部數據（一個引用不同的新對象）賦值給表格綁定的數據，就會導致所有行全部重新渲染，哪怕大多數行數據并沒有變化。

6.3、vue2判斷數據是否變化是通過hasChanged函數實現的

function hasChanged(x : unknown, y : unknown) :boolean{if (x === y){return x === 0 && 1 / x !== 1 / (y as number)} else {return x === x || y === y}
}

????????這里x與y分別是新值和舊值。

????????正常情況下，如果x===y，代表沒有改變，返回false，反之則返回true。

①為什么在x === y成立的時候，還要做一個return x === 0 && 1 / x !== 1 / (y as number)的判斷？

????????+0 === -0的判斷恒為true，但二者實際不相等。所以先判斷x是否為0+或0-，如果不是，則直接觸發短路返回false，如果是，就通過求倒數，比較倒數是否相等，如果均為0+或均為0-，則依然返回false，若倒數為Infinity和-Infinity，這樣就會返回true，從而排除從0+變為0-，但是卻新舊值卻相等的情況。

②為什么在 x === y 不成立的時候，還要做一個x === x || y === y的判斷？

????????因為如果NaN === NaN的判斷恒為false，所以哪怕不相等，還要做一下自判斷，若新舊值都是NaN，則返回false。排除x與y都為NaN，但是新舊值卻不相等的情況。

七、使用v-show替代v-if

????????對于頻繁切換顯示狀態的元素，使用v-show可以保證虛擬dom樹的穩定，尤其是對于那些內部包含大量dom元素的節點，這一點極其重要。

? ? ? ? DOM樹只與布局有關，與顯示與否無關。使用v-show渲染的元素，不管返回值是什么，都會添加到dom樹中，但是使用v-if渲染的元素，只有為true的時候才會添加到DOM樹中。

八、使用延遲裝載（defer）

????????HTML中的<script>標簽有一個可選的defer屬性。當腳本設置了defer屬性后，它會被告知瀏覽器在文檔解析完成后再執行這個腳本，而不是立即執行。

????????對于圖片和其他資源，可以使用 v-lazy-image 或 v-lazy-component 這樣的 Vue 指令來實現懶加載。

<!-- 在模板中使用 -->
<img v-lazy="imageSrc" alt="Lazy Image">

????????使用像 vue-lazyload 這樣的庫來實現圖片和組件的懶加載。?

// 安裝 vue-lazyload
npm install vue-lazyload --save// 在 main.js 中使用
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';Vue.use(VueLazyload, {preLoad: 1.64,error: 'error.png',loading: 'loading.png',attempt: 1
});

九、使用keep-alive

????????keep-alive 是 Vue 的一個內置組件，用于緩存不活動的組件實例，避免重復創建和銷毀組件，從而提高性能。這在單頁面應用（SPA）中特別有用，可以保持用戶狀態和避免不必要的重新渲染。

<!-- 在路由出口使用 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>
</keep-alive>

? ? ? ? 這里會根據路由的 meta 屬性決定是否使用 keep-alive。

十、長列表優化

????????海量數據渲染容易導致卡頓，除了可以運用第六點保持引用對象穩定外，Vue還提供了幾種方法來優化長列表的渲染：

虛擬滾動（Virtual Scrolling）：只渲染可視區域內的元素，而不是渲染整個列表。可以使用 vue-virtual-scroll-list 或 vue-virtual-scroller 等庫來實現。
分頁或無限滾動：將數據分批次加載，而不是一次性加載所有數據。
節流（Throttle）和防抖（Debounce）：在處理滾動事件等頻繁觸發的操作時，使用節流或防抖技術減少事件處理的頻率。

????????此外，element plus也提供了虛擬化組件，用來處理海量數據的渲染問題

十一、打包體積優化

????????減少最終打包文件的大小可以提高應用的加載速度和性能。常見方法包括：

代碼分割（Code Splitting）：使用 Webpack 的動態 import() 語法來實現代碼分割，只加載用戶實際需要的代碼。
Tree Shaking：移除未使用的代碼，Webpack 等現代打包工具可以自動進行 Tree Shaking
使用 Vue CLI 的優化選項：Vue CLI 提供了多種優化配置，如 vue-cli-service build --report 可以生成報告，幫助分析打包體積。
移除 console.log：在生產環境中，確保移除所有的 console.log 語句，因為它們會增加打包體積。
使用 Terser 或 UglifyJS 壓縮 JavaScript：這些工具可以壓縮 JavaScript 代碼，減少文件大小。