vue面試題之vue項目的優化方案

1. vue中項目優化：

路過的朋友，能夠點個贊，關注一下~~~

1.1 書寫習慣

1. 不須要作響應式的數據，不要放在data中

不要把全部的數據都放到data中，只把你須要作響應式的數據放到data中。若是一個數據放到了data中，vue會給這個數據添加一個getter和setter，當你獲取數據調用getter，當你設置數據調用setter，性能不高。

2. SPA(Single Page Application)

單一頁面，不利於SEO的搜索，主頁可使用服務器渲染。

3. 能拆分的組件儘量拆分 顆粒度儘量小

提升利用性，增長代碼的可維護性; 減少沒必要要渲染

4. v-if v-show

   • v-show 控制的是display v-show仍是會渲染
   • v-if 根據就不會渲染
   • 能使用v-if的就使用v-if
   • 若是說頻繁讓一個組件顯示隱藏，用v-show
   • 若是不頻繁讓一個組件顯示隱藏，用v-if

5，使用v-for時，必須加上key

儘量使用id做爲key 減小沒必要渲染 通常狀況下，不要使用index做爲key (例如，當進行排序的時候，數據的key值發生了改變，而vue機制會將其判斷爲數據的改變，而進行從新渲染。)

6. Object.freeze

也會實現數據劫持，將數據進行凍結 一個被凍結的對象不再能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象後該對象的原型也不能被修改。

7. 路由懶加載

在使用該路由的時候，再進行導入該路由。

8. 組件懶加載

在一開始的時候不須要進行導入組件，當匹配到路由時，須要加載組件的時候，再將組件進行載入 components:{ yyy: () => import(yyy) }

1.2第二類：加載

• 圖片賴加載，須要的時候再進行請求加載。
• 第三方模塊按需導入，在使用第三方插件的時候，並非使用裏面的全部的方法，咱們能夠按需導入，使用到那個便將那個進行導入

1.3 第三類：提高用戶體驗

1. 使用骨架屏，當用戶的網絡很差的時候，發送請求時，頁面上顯示大體的應用的框架，增長用戶的體驗感。

2. pwa 緩存

當使用弱網，2G，3G網的時候，能夠將內容進行緩存

1.3 第四類： SEO

可使用服務器端渲染主頁面，方便seo進行數據的爬取

若是網絡環境很是很差，可能出來白屏 預渲染成 死數據 <div id="app">heelo</div> 經過插件來實現 SSR

1.4 第五類：從後端角度來優化

• 緩存
• 壓縮