總結一些Vue的性能優化

前言

你們好啊，我是 _像個男孩❤ 最近公司真的是太閒了，纔想着把以前總結的整理成流水帳，沒事的時候康一康，都是平時寫項目的一些小經驗還有從各位大佬那裏偷學來的，廢話很少，開始個人表演~~css

代碼優化

1. 模塊化、組件化

組件是把經常使用的東西封裝起來，最重要的就是複用。
模塊是把同一功能或業務的代碼進行分離，下降模塊間的耦合性，能夠獨立運行和管理。
包括css也能夠經過less和sass來減小重複代碼。

2. vFor 的 key

在使用v-for渲染元素列表時，爲每一項都設置惟一的key值，爲了讓Vue內部更快的定位到該條數據。vue

咱們都知道盡可能不要使用index下標做爲key值，例如：react

let arr = [
 { id: 1, title: 'one' },  { id: 2, title: 'two' },  { id: 3, title: 'three' } ] arr.splice(1, 1) console.log(arr) 複製代碼

這時index發生了變化，列表中全部的key值都發生了變化，此時v-for會對key變化的元素從新渲染，但其實除了刪除的元素其餘都沒有發生變化，致使vue用錯誤的舊子節點，作不少沒有必要的工做。因此儘可能不要使用index做key值，使用id等字段更好，也不要用隨機數做爲key，刪掉舊節點，建立新節點，你的老闆會被氣嗝屁。css3

3. vFor 和 vIf

官方都告訴咱們啦，當和v-if一塊兒使用時，v-for的優先級更高，顯然每一次渲染列表時都須要進行一次判斷，更好的辦法是用computed將不須要的值過濾掉。正則表達式

還想多巴巴一句的是，v-if是對銷燬和重建DOM進行元素的顯示和隱藏，有更高的切換消耗，而v-show是經過display的簡單操做，初始渲染消耗更高，頻繁切換DOM時適用。(發現本身大部分項目都是直接用v-if的)數組

4. 懶加載

4.1 路由懶加載

能夠加快首屏渲染的速度。緩存

{
 path: "/tips",  name: "tips",  component: resolve => require(["@/views/tips"], resolve),  meta: {  title: "路由懶加載"  } } 複製代碼

關於首屏優化，過大的項目可能會由於沒有加載完出現白屏的狀況，能夠加個loading加載提示或者啓動頁。sass

4.2 圖片懶加載

大多數框架都有圖片懶加載的功能，多多使用。
使用Base64加載小圖片
圖標儘量使用svg和字體圖標

5. keep-alive緩存

keep-alive是用來緩存組件從而節省性能的抽象組件，被包裹在keep-alive中的組件其狀態會被保留，避免從新渲染。markdown

<!-- 和 `<transition>` 一塊兒使用 -->
<transition>  <keep-alive>  <component :is="view"></component>  </keep-alive> </transition> 複製代碼

利用include、exclude屬性，兩者均可以用逗號分隔字符串、正則表達式或一個數組來表示。 include屬性表示只有name屬性爲a，b的組件會被緩存，其它組件不會被緩存，exclude屬性表示除了name屬性爲c的組件不會被緩存，其它組件都會被緩存。框架

<!-- 注意是組件的名字，不是路由的名字 -->
<keep-alive include="a,b">  <router-view></router-view> </keep-alive> <keep-alive exclude="c">  <router-view></router-view> </keep-alive> 複製代碼

6. 鉤子hook

實不相瞞以前我這隻菜狗一直覺得hook是react專屬，直到我用了這個回調hook，嗯~真香！

(1) 同一個組件中

mounted() {
 // 在Vue組件中，能夠用$on,$once去監聽全部的生命週期鉤子函數  // 能夠經過hook監聽組件銷燬鉤子函數，並取消監聽事件  this.$once("hook:beforeDestroy", () => {  // 官方建議咱們 私有property名 以$_開頭  window.removeEventListener("resize", this.$_handleListen);  }); }, 複製代碼

(2) 父子組件中

<!-- 組件的全部生命週期鉤子均可以經過@hook:鉤子函數名 來監聽觸發 -->
<component @hook:updated="$_handleListen" /> 複製代碼

平時大多數功能不須要hook也能實現，但當第三方組件庫尚未實現@change回調時，hook真的是賊香了！

7. Object.freeze()

若是你有一個超大的Array或Object，而且確信數據不會修改，使用Object.freeze()可讓性能大幅提高。

mounted() {
 let arr = [1, 2, 3, 4, 5]  Object.freeze(arr) } 複製代碼

當數據是滾動加載時，也是能夠用concat添加數據的，合理地使用Object.freeze()能夠節省不少渲染性能。

8. watch監聽

好比一個列表頁，咱們但願用戶在搜索框輸入搜索關鍵字的時候，能夠自動觸發搜索，能夠經過watch監聽搜索關鍵字的變化。

data() {
 return {  serachValue: ''  }; }, watch: {  // 在值發生變化以後，從新加載數據  searchValue: {  // 經過handler來監聽屬性變化, 初次調用 newValue爲""空字符串， oldValue爲 undefined  handler(newValue, oldValue) {  if (newValue !== oldValue) {  console.log('作了一些事');  }  },  // 當即觸發 如須要初始化加載數據  immediate: true,  // 深度監聽 指定deep屬性爲true, watch會監聽對象裏面每個值的變化  deep: true  } }, 複製代碼

9. 函數式組件

純展現性的業務組件，只須要將外部傳入的數據進行展示，不須要有內部狀態，不須要在生命週期鉤子函數裏面作處理，這時候就能夠考慮使用函數式組件。(偷學來的沒作過實踐，以後再補充吧)

// 因爲函數式組件沒有建立組件實例，全部傳統的經過this來調用的屬性，在這裏都須要經過context來調用
Vue.component('my-functional-button', {  functional: true,  render: function (createElement, context) {  return createElement('button', context.data, context.children)  } }) 複製代碼

項目優化

1. 按需引入

使用UI框架儘可能按需引入，減小多餘的開銷，合理的及時止損。

2. 使用cdn的方式外部加載一些資源

沒必要要打包的外部引用模塊能夠經過cdn引入。
還有一些經過cdn加速的大圖

3. vue.config.js配置

若是不設置打包會生成一些map文件，生產環境能夠經過map去查看源碼。

module.exports = {
 productionSourceMap: false, } 複製代碼

官方config參考文檔

4. 刪除多餘的代碼，減小圖片的使用

刪除一些註釋和打印的代碼...
圖片會佔很大一部分體積，一些圖片效果能夠經過css3來實現...

後記

項目優化是十分重要的，每一點小優化都是對本身提高對項目負責，關於項目優化毫不是這麼簡單，還有不少須要咱們學習的東西，但願你們多多嘗試，一塊兒學習呀。

❝
若是以爲文章還不錯，點個贊給點鼓勵被，也但願你們能在評論指出不足我好及時改正，大佬們有什麼好方法也評論出來讓我學習學習呀~ (這這這這皮膚也太太太太好看了吧！)
❞

本文使用 mdnice 排版