眾所周知，vue專案採用了資料雙向繫結和虛擬DOM基礎，在資料驅動代替DOM頻繁渲染已經算是非常高效了，對開發者而言已經非常優化了，那為什麼還會有Vue效能優化這一說呢？

因為目前Vue 2.x使用了webpack等第三方打包構建工具，並且支援其他第三方的外掛，我們在專案中使用這些工具時可能不同的操作在執行或打包效率上會有不同的效果，下面就來詳細說明優化的方向。

1 v-if 和 v-show 的使用

程式設計客棧
• v-if 為false的時候不會渲染DOM到檢視，為true的時候才會渲染到檢視；
• v-show 不管初始條件是什麼，元素總是會渲染到檢視，只是簡單地基於 css 的 display 屬性進行切換。

最佳實踐：頻繁切換顯示隱藏的元素採用v-show，很少改變使用v-if

2 computed 和 watch 區分使用

• computed： 是計算屬性，依賴其它屬性值，並且 computed 的值有快取，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed的值；
• watch： 更多的是「觀察」的作用，類似於某些資料的監聽回撥 ，每當監聽的資料變化時都會執行回撥進行後續操作；

最佳實踐：當我們需要進行數值計算，並且依賴於其它資料時，應該使用 computed，因為可以利用 computed 的快取特性，避免每次獲取值時，都要重新計算；當我們需要在資料變化時執行非同步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行非同步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，並在我們得到最終結果前，設定中間狀態。這些都是計算屬性無法做到的。

3 v-for 遍歷必須為 item 新增 key，且避免同時使用 v-if

現在不加key一般會報錯的，新增key可以方便 Vue內部機制精準找到該條列表資料。當更新時，新的狀態值和舊的狀態值對比，較快地定位到 diff

v-for比 v-if 優先順序高，如果每一次都需要遍歷整個陣列，將會影響速度，尤其是當之需要渲染很小一部分的時候，必要情況下應該替換成 computed屬性。

<ul>
 <li v-for="user in adminUsers" :key="uswww.cppcns.comer.id">
  {{ user.name }}
 </li>
</ul>

<script>
export default {
 data () {
 return { users: [] }
 },computed: {
 adminUsers: function(){
 return this.users.filter(()=>user.isAdmin)
 }
 }
}
</script>

4 純顯示長列表效能優化

對於只用來展示用的資料，不需要做vue做資料劫持，只需要凍結這個物件即可：

export default {
 data () {
 return {
 users: []
 }
 },created () {
 axios.get('/api/users').then((res)=>{
 this.users = Object.freeze(res.data.users)
 })
 }
}
 

5 事件的銷燬

Vue 元件銷燬時，會自動清理它與其它例項的連線，解綁它的全部指令及gFoaDenj事件監聽器，但是僅限於元件本身的事件。 如果在 js 內使用 addEventListene 等方式是不會自動銷燬的，我們需要在元件銷燬時手動移除這些事件的監聽，以免造成記憶體洩露，如：

created() {
 addEventListener('click',this.click,false)
},beforeDestroy() {
 removeEventListener('click',false)
}
 

6 圖片資源懶載入

使用vue-lazyload外掛：

安裝

npm install vue-lazyload --save-dev

man.js 引用

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 或自定義
Vue.use(VueLazyload,{
 preLoad: 1.3,error: 'dist/error.png',loahttp://www.cppcns.comding: 'dist/loading.gif',attempt: 1
})

修改img標籤

<img v-lazy="/static/img/1.png">

7 路由懶載入

Vue 是單頁面應用，可能會有很多的路由引入 ，這樣使用 webpcak 打包後的檔案很大，當進入首頁時，載入的資源過多，頁面會出現白屏的情況，不利於使用者體驗。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應的元件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
 routes: [
 { path: '/foo',component: Foo }
 ]
}www.cppcns.com)

8 第三方外掛按需引入

我們在使用第三方庫的時候，最好是按需引入而不是全域性引入，因為第三方庫的外掛比較多全部引入會打包比較慢，如Element UI、Ant Design of Vue等UI庫：

按需引入

import Vue from 'vue';
import { DatePicker } from 'ant-design-vue';
Vue.use(DatePicker);
 

全域性引入

import Antd from 'ant-design-vue';
Vue.use(Antd);

9 優化無限列表效能

如果你是在渲染帶無限滾動載入的列表時，那麼需要採用 視窗化 的技術來優化效能，只需要渲染少部分割槽域的內容，減少重新渲染元件和建立 dom 節點的時間。 你可以參考以下開源專案 vue-virtual-scroll-list 和 vue-virtual-scroller來優化這種無限列表的場景的。
大家自己去github看使用說明吧。

10 服務端渲染 SSR or 預渲染

一般單頁應用是在瀏覽器端完成頁面渲染的，資料是發請求從後臺拿過來的；而伺服器端渲染SSR是頁面元素的結構(HTML)是在伺服器端就已經構建好的，直接把整個頁面返回到客戶端的。
那SSR有什麼優缺點呢：

• 更好的SEO：網路爬蟲可以直接爬取頁面資訊利於被搜尋引擎收錄，而ajax非同步請求的內容不會被收錄，所以通過SSR渲染的完整的頁面資訊更利於SEO；
• 支援的鉤子函式只支援 beforCreate 和 created，伺服器需要處於Node Server環境；
• 需要更高的伺服器配置：因為它包含了資料處理和頁面渲染，所以伺服器開支變大

如果對首屏載入速度要求比較高或對SEO有要求的可以採用SSR渲染。

PS：優化只是建議，需要考慮是否適合自己的專案，包括優化難度、影響範圍、適用場景、是否影響別的模組、優化效果是否明顯等等。適合自己的才是最好的！

到此這篇關於Vue2.x 專案效能優化之程式碼優化的實現的文章就介紹到這了,更多相關Vue2.x 程式碼優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！