眾所周知，Vue項目采用了數(shù)據(jù)雙向綁定和虛擬DOM基礎(chǔ)，在數(shù)據(jù)驅(qū)動代替DOM頻繁渲染已經(jīng)算是非常高效了，對開發(fā)者而言已經(jīng)非常優(yōu)化了，那為什么還會有Vue性能優(yōu)化這一說呢？

因為目前Vue 2.x使用了webpack等第三方打包構(gòu)建工具，并且支持其他第三方的插件，我們在項目中使用這些工具時可能不同的操作在運行或打包效率上會有不同的效果，下面就來詳細(xì)說明優(yōu)化的方向。

1 v-if 和 v-show 的使用

• v-if 為false的時候不會渲染DOM到視圖，為true的時候才會渲染到視圖；
• v-show 不管初始條件是什么，元素總是會渲染到視圖，只是簡單地基于 CSS 的 display 屬性進行切換。

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

2 computed 和 watch 區(qū)分使用

• computed： 是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計算 computed的值；
• watch： 更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作；

最佳實踐：當(dāng)我們需要進行數(shù)值計算，并且依賴于其它數(shù)據(jù)時，應(yīng)該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算；當(dāng)我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，應(yīng)該使用 watch，使用 watch 選項允許我們執(zhí)行異步操作 ( 訪問一個 API )，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計算屬性無法做到的。

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

現(xiàn)在不加key一般會報錯的，添加key可以方便 Vue內(nèi)部機制精準(zhǔn)找到該條列表數(shù)據(jù)。當(dāng)更新時，新的狀態(tài)值和舊的狀態(tài)值對比，較快地定位到 diff

v-for比 v-if 優(yōu)先級高，如果每一次都需要遍歷整個數(shù)組，將會影響速度，尤其是當(dāng)之需要渲染很小一部分的時候，必要情況下應(yīng)該替換成 computed屬性。

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

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

4 純顯示長列表性能優(yōu)化

對于只用來展示用的數(shù)據(jù)，不需要做vue做數(shù)據(jù)劫持，只需要凍結(jié)這個對象即可：

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

5 事件的銷毀

Vue 組件銷毀時，會自動清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器，但是僅限于組件本身的事件。 如果在 js 內(nèi)使用 addEventListene 等方式是不會自動銷毀的，我們需要在組件銷毀時手動移除這些事件的監(jiān)聽，以免造成內(nèi)存泄露，如：

created() {
 addEventListener('click', this.click, false)
},
beforeDestroy() {
 removeEventListener('click', this.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',
 loading: 'dist/loading.gif',
 attempt: 1
})

修改img標(biāo)簽

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

7 路由懶加載

Vue 是單頁面應(yīng)用，可能會有很多的路由引入 ，這樣使用 webpcak 打包后的文件很大，當(dāng)進入首頁時，加載的資源過多，頁面會出現(xiàn)白屏的情況，不利于用戶體驗。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)的組件，這樣就更加高效了。這樣會大大提高首屏顯示的速度，但是可能其他的頁面的速度就會降下來。

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

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 優(yōu)化無限列表性能

如果你是在渲染帶無限滾動加載的列表時，那么需要采用 窗口化 的技術(shù)來優(yōu)化性能，只需要渲染少部分區(qū)域的內(nèi)容，減少重新渲染組件和創(chuàng)建 dom 節(jié)點的時間。 你可以參考以下開源項目 vue-virtual-scroll-list 和 vue-virtual-scroller來優(yōu)化這種無限列表的場景的。
大家自己去Github看使用說明吧。

10 服務(wù)端渲染 SSR or 預(yù)渲染

一般單頁應(yīng)用是在瀏覽器端完成頁面渲染的，數(shù)據(jù)是發(fā)請求從后臺拿過來的；而服務(wù)器端渲染SSR是頁面元素的結(jié)構(gòu)(HTML)是在服務(wù)器端就已經(jīng)構(gòu)建好的，直接把整個頁面返回到客戶端的。
那SSR有什么優(yōu)缺點呢：

• 更好的SEO：網(wǎng)絡(luò)爬蟲可以直接爬取頁面信息利于被搜索引擎收錄，而ajax異步請求的內(nèi)容不會被收錄，所以通過SSR渲染的完整的頁面信息更利于SEO；
• 支持的鉤子函數(shù)只支持 beforCreate 和 created，服務(wù)器需要處于Node Server環(huán)境；
• 需要更高的服務(wù)器配置：因為它包含了數(shù)據(jù)處理和頁面渲染，所以服務(wù)器開支變大

如果對首屏加載速度要求比較高或?qū)EO有要求的可以采用SSR渲染。

PS：優(yōu)化只是建議，需要考慮是否適合自己的項目，包括優(yōu)化難度、影響范圍、適用場景、是否影響別的模塊、優(yōu)化效果是否明顯等等。適合自己的才是最好的！

到此這篇關(guān)于Vue2.x 項目性能優(yōu)化之代碼優(yōu)化的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue2.x 代碼優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論