背景：
在項目中前端使用vue開發，都是使用vue腳手架工具，其webpack配置文件已經將大部分性能優化了，比如代碼壓縮，圖片base64轉換，代碼分離等。這些我們統統不需要去管。但使用vue時，其實還是有些細節點可以優化的，以下爲開發過程中的一些前端性能優化的總結點。
內容：
1.在vue中v-for和v-if不要放在同一個元素上使用。由於 v-for 和 v-if 放在同一個元素上使用會帶來一些性能上的影響，官方給出的建議是在計算屬性上過濾之後再進行遍歷。所以平時開發不推薦一起使用vue官網(https://cn.vuejs.org/v2/style...。如下：
2、在同一個頁面中如果不需要立刻展示的組件，可以使用動態組件（動態組件主頁面加載是不會加載，等到觸發條件時才加載該組件，並且加載一次後就有緩存）。比如一個頁面有添加頁面，這個添加頁面一般我們會提取出爲組件，這個時候組件使用動態組件來加載可以優化性能，提高主頁面的加載速度。動態組件加載方式爲：
3、路由懶加載模式，與組件的動態加載類似vue路由懶加載（https://router.vuejs.org/zh/g...）。如下：
4、對於前端純大數據展示（純大數據指：拿到數據就是直接用於展示的，不需要做修改其中字段等處理的，而且數據量比較大）的情況下，使用Object.freeze方法來包裹變量，那邊vue內部不會使用defineproperty去監聽數據內部的變化，只有本身變化時纔會觸發，在大量數據的情況下，vue內部不在去監聽數據的變化會提高性能。使用demo如下：
5、Keep-alive，vue提供了keep-alive標籤來存儲緩存，對於一些視頻控件object或圖表類的使用，我們經常會使用v-if指令，而v-if是會創建和銷燬的，如果頻繁操作在ie下的內存會持續上升，而keep-alive可以有效的緩存，抑制內存的持續上升vue-keep-alive（https://cn.vuejs.org/v2/api/#...）。使用方式爲
![圖片上傳中...]
6、Es6集合Set()可優化遍歷速度，set集合是可用於查找該集合內是否存在某個元素。這種維度可有效的提高遍歷效率。使用場景判斷當一個數組中的元素是否在已選集合內
7、scope中元素選擇器儘量少用。在 scoped 樣式中，類選擇器比元素選擇器更好，因爲大量使用元素選擇器是很慢的。
爲了給樣式設置作用域，Vue 會爲元素添加一個獨一無二的特性，例如 data-v-f3f3eg9。然後修改選擇器，使得在匹配選擇器的元素中，只有帶這個特性纔會真正生效 (比如 button[data-v-f3f3eg9])。
問題在於大量的元素和特性組合的選擇器 (比如 button[data-v-f3f3eg9]) 會比類和特性組合的選擇器 慢，所以應該儘可能選用類選擇器。
（https://cn.vuejs.org/v2/style...）
如果對您有幫助請點個贊，謝謝！