【前端性能優化】vue性能優化

1、template

1. v-show，v-if 用哪一個？第一個維度是權限問題，只要涉及到權限相關的展現無疑要用 v-if ，第二個維度在沒有權限限制下根據用戶點擊的頻次選擇，頻繁切換的使用 v-show ，不頻繁切換的使用 v-if ，這裏要說的優化點在於減小頁面中 dom 總數，我比較傾向於使用 v-if ，由於減小了 dom 數量，加快首屏渲染，至於性能方面我感受肉眼看不出來切換的渲染過程，也不會影響用戶的體驗。

2. 不要在模板裏面寫過多的表達式與判斷 v-if="isShow && isAdmin && (a || b)" ，這種表達式雖然說能夠識別，可是不是長久之計，當看着不舒服時，適當的寫到 methods 和 computed 裏面封裝成一個方法，這樣的好處是方便咱們在多處判斷相同的表達式，其餘權限相同的元素再判斷展現的時候調用同一個方法便可。

3. 循環調用子組件時添加 key,key 能夠惟一標識一個循環個體，可使用例如 item.id 做爲 key，假如數組數據是這樣的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key="item" 顯然沒有意義，更好的辦法就是在循環的時候 (item, index) in arr ，而後 :key="index" 來確保 key 的惟一性。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。

   2、style

一、單獨模塊的樣式要加上 <style scoped> ，目的就是懼怕其餘開發人員對文件的樣式有衝突致使樣式混亂的問題。

二、儘可能少用浮動和定位，能用flex的解決就用flex解決

3、script

1. methods 中每個方法必定要簡單，只作一件事，儘可能封裝可複用的簡短的方法，參數不易過多。若是十分依賴 lodash 開發，method 看着會簡潔許多，代價就是總體的 bundle 體積會大，假如項目僅僅用到小部分方法能夠局部引入 loadsh，不想用 lodash 的話能夠本身封裝一個 util.js 文件
2. watch 和 computed 用哪一個的問題看官網的例子，計算屬性主要是作一層 filter 轉換，切忌加一些調用方法進去，watch 的做用就是監聽數據變化去改變數據或觸發事件如 this.$store.dispatch('update', { ... })

  3.減小watch的數據。當組件某個數據變動後須要對應的state進行變動，就須要對另外的組件進行state進行變動。可使用watch監聽相應的數據變動並綁定事件。當watch的數據比較小，性能消耗不明顯。當數據變大，系統會出現卡頓，因此減小watch的數據。其它不一樣的組件的state雙向綁定，能夠採用事件中央總線或者vuex進行數據的變動操做。

4、組件優化

在項目開發過程之中，若是把全部的組件的佈局寫在一個組件中，當數據變動時，因爲組件代碼比較龐大，vue 的數據驅動視圖更新會比較慢，形成渲染過慢，也會形成比較差的體驗效果。因此要把組件細分，好比一個組件，能夠把整個組件細分紅輪播組件、列表組件、分頁組件等。

5、組件的異步加載（按需加載組件）

在平時的demo中，可能不會碰見這個需求。當頁面不少，組件不少的時候，SPA頁面在首次加載的時候，就會變的很慢。這是由於vue首次加載的時候把可能一開始看不見的組件也一次加載了，這個時候就須要對頁面進行優化，就須要異步組件了。

{
    path: '/home',
    name: 'home',
    component:require('@views/home').default
}
{
    path: '/home',
    name: 'home',
    component:() => import('@views/home')
}
複製代碼

6、打包優化

解決方法很簡單，打包 vender 時不打包 vue、vuex、vue-router、axios 等，換用國內的 bootcdn 直接引入到根目錄的 index.html 中。

例如：

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>複製代碼

在 webpack 裏有個 externals，能夠忽略不須要打包的庫

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}複製代碼