好久不寫博文了，本文作為我使用半年 vue 框架的經驗小結，隨便談談，且本文只適用于 vue-cli 初始化的項目或依賴于 webpack 打包的項目。

前幾天看到大家說 vue 項目越大越難優化，帶來很多痛苦，這是避免不了的，問題終究要解決，框架的性能是沒有問題的，各大測試網站都有相關數據。下面進入正題

基礎優化

所謂的基礎優化是任何 web 項目都要做的，并且是問題的根源。HTML，CSS，JS 是第一步要優化的點

分別對應到 .vue 文件內的，<template>,<style>,<script>，下面逐個談下 vue 項目里都有哪些值得優化的點

template

語義化標簽，避免亂嵌套，合理命名屬性等等標準推薦的東西就不談了。

模板部分幫助我們展示結構化數據，vue 通過數據驅動視圖，主要注意一下幾點

v-show，v-if 用哪個？在我來看要分兩個維度去思考問題，第一個維度是權限問題，只要涉及到權限相關的展示無疑要用 v-if，第二個維度在沒有權限限制下根據用戶點擊的頻次選擇，頻繁切換的使用 v-show，不頻繁切換的使用 v-if，這里要說的優化點在于減少頁面中 dom 總數，我比較傾向于使用 v-if，因為減少了 dom 數量，加快首屏渲染，至于性能方面我感覺肉眼看不出來切換的渲染過程，也不會影響用戶的體驗。 不要在模板里面寫過多的表達式與判斷 v-if="isShow && isAdmin && (a || b)"，這種表達式雖說可以識別，但是不是長久之計，當看著不舒服時，適當的寫到 methods 和 computed 里面封裝成一個方法，這樣的好處是方便我們在多處判斷相同的表達式，其他權限相同的元素再判斷展示的時候調用同一個方法即可。 循環調用子組件時添加 key，key 可以唯一標識一個循環個體，可以使用例如 item.id 作為 key，假如數組數據是這樣的 ['a' , 'b', 'c', 'a'],使用 :key="item" 顯然沒有意義，更好的辦法就是在循環的時候 (item, index) in arr，然后 :key="index"來確保 key 的唯一性。

style

將樣式文件放在 vue 文件內還是外？討論起來沒有意義，重點是按模塊劃分，我的習慣是放在 vue 文件內部，方便寫代碼是在同一個文件里跳轉上下對照，無論內外建議加上 <style scopeed> 將樣式文件鎖住，目的很簡單，再好用的標準也避免不了多人開發的麻煩，約定命名規則也可能會沖突，鎖定區域后盡量采用簡短的命名規則，不需要 .header-title__text 之類的 class，直接 .title 搞定。 為了和上一條作區分，說下全局的樣式文件，全局的樣式文件，盡量抽象化，既然不在每一個組件里重復寫，就盡量通用，這部分抽象做的越好說明你的樣式文件體積越小，復用率越高。建議將復寫組件庫如 Element 樣式的代碼也放到全局中去。 不使用 float 布局，之前看到很多人封裝了