眾所周知，Vue項(xiàng)目采用了數(shù)據(jù)雙向綁定和虛擬DOM基礎(chǔ)，在數(shù)據(jù)驅(qū)動(dòng)代替DOM頻繁渲染已經(jīng)算是非常高效了，對(duì)開發(fā)者而言已經(jīng)非常優(yōu)化了，那為什么還會(huì)有Vue性能優(yōu)化這一說(shuō)呢？
因?yàn)槟壳癡ue 2.x使用了webpack等第三方打包構(gòu)建工具，并且支持其他第三方的插件，我們?cè)陧?xiàng)目中使用這些工具時(shí)可能不同的操作在運(yùn)行或打包效率上會(huì)有不同的效果，下面就來(lái)詳細(xì)說(shuō)明優(yōu)化的方向。
1 v-if 和 v-show 的使用
v-if 為false的時(shí)候不會(huì)渲染DOM到視圖，為true的時(shí)候才會(huì)渲染到視圖；
v-show 不管初始條件是什么，元素總是會(huì)渲染到視圖，只是簡(jiǎn)單地基于 CSS 的 display 屬性進(jìn)行切換。
最佳實(shí)踐：頻繁切換顯示隱藏的元素采用v-show，很少改變使用v-if
2 computed 和 watch 區(qū)分使用
computed： 是計(jì)算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時(shí)才會(huì)重新計(jì)算 computed的值；
watch： 更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)進(jìn)行后續(xù)操作；
最佳實(shí)踐：當(dāng)我們需要進(jìn)行數(shù)值計(jì)算，并且依賴于其它數(shù)據(jù)時(shí)，應(yīng)該使用 computed，因?yàn)榭梢岳?computed 的緩存特性，避免每次獲取值時(shí)，都要重新計(jì)算；當(dāng)我們需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，應(yīng)該使用 watch，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 ( 訪問(wèn)一個(gè) API )，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無(wú)法做到的。
3 v-for 遍歷必須為 item 添加 key，且避免同時(shí)使用 v-if
現(xiàn)在不加key一般會(huì)報(bào)錯(cuò)的，添加key可以方便 Vue內(nèi)部機(jī)制精準(zhǔn)找到該條列表數(shù)據(jù)。當(dāng)更新時(shí)，新的狀態(tài)值和舊的狀態(tài)值對(duì)比，較快地定位到 diff
v-for比 v-if 優(yōu)先級(jí)高，如果每一次都需要遍歷整個(gè)數(shù)組，將會(huì)影響速度，尤其是當(dāng)之需要渲染很小一部分的時(shí)候，必要情況下應(yīng)該替換成 computed屬性。
4 純顯示長(zhǎng)列表性能優(yōu)化
對(duì)于只用來(lái)展示用的數(shù)據(jù)，不需要做vue做數(shù)據(jù)劫持，只需要凍結(jié)這個(gè)對(duì)象即可：
export default { data () { return { users: [] } }, created () { axios.get('/api/users').then((res)=>{ this.users = Object.freeze(res.data.users) }) } }
5 事件的銷毀
Vue 組件銷毀時(shí)，會(huì)自動(dòng)清理它與其它實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽器，但是僅限于組件本身的事件。 如果在 js 內(nèi)使用 addEventListene 等方式是不會(huì)自動(dòng)銷毀的，我們需要在組件銷毀時(shí)手動(dòng)移除這些事件的監(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
1
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">
1
7 路由懶加載
Vue 是單頁(yè)面應(yīng)用，可能會(huì)有很多的路由引入 ，這樣使用 webpcak 打包后的文件很大，當(dāng)進(jìn)入首頁(yè)時(shí)，加載的資源過(guò)多，頁(yè)面會(huì)出現(xiàn)白屏的情況，不利于用戶體驗(yàn)。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)的組件，這樣就更加高效了。這樣會(huì)大大提高首屏顯示的速度，但是可能其他的頁(yè)面的速度就會(huì)降下來(lái)。
const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })
8 第三方插件按需引入
我們?cè)谑褂玫谌綆?kù)的時(shí)候，最好是按需引入而不是全局引入，因?yàn)榈谌綆?kù)的插件比較多全部引入會(huì)打包比較慢，如Element UI、Ant Design of Vue等UI庫(kù)：
按需引入
import Vue from 'vue'; import { DatePicker } from 'ant-design-vue'; Vue.use(DatePicker);
1
2
3
全局引入
import Antd from 'ant-design-vue'; Vue.use(Antd);
1
2
9 優(yōu)化無(wú)限列表性能
如果你是在渲染帶無(wú)限滾動(dòng)加載的列表時(shí)，那么需要采用 窗口化 的技術(shù)來(lái)優(yōu)化性能，只需要渲染少部分區(qū)域的內(nèi)容，減少重新渲染組件和創(chuàng)建 dom 節(jié)點(diǎn)的時(shí)間。 你可以參考以下開源項(xiàng)目 vue-virtual-scroll-list 和 vue-virtual-scroller來(lái)優(yōu)化這種無(wú)限列表的場(chǎng)景的。
大家自己去Github看使用說(shuō)明吧。
10 服務(wù)端渲染 SSR or 預(yù)渲染
一般單頁(yè)應(yīng)用是在瀏覽器端完成頁(yè)面渲染的，數(shù)據(jù)是發(fā)請(qǐng)求從后臺(tái)拿過(guò)來(lái)的；而服務(wù)器端渲染SSR是頁(yè)面元素的結(jié)構(gòu)(HTML)是在服務(wù)器端就已經(jīng)構(gòu)建好的，直接把整個(gè)頁(yè)面返回到客戶端的。
那SSR有什么優(yōu)缺點(diǎn)呢：
更好的SEO：網(wǎng)絡(luò)爬蟲可以直接爬取頁(yè)面信息利于被搜索引擎收錄，而ajax異步請(qǐng)求的內(nèi)容不會(huì)被收錄，所以通過(guò)SSR渲染的完整的頁(yè)面信息更利于SEO；
支持的鉤子函數(shù)只支持 beforCreate 和 created，服務(wù)器需要處于Node Server環(huán)境；
需要更高的服務(wù)器配置：因?yàn)樗藬?shù)據(jù)處理和頁(yè)面渲染，所以服務(wù)器開支變大
如果對(duì)首屏加載速度要求比較高或?qū)EO有要求的可以采用SSR渲染。
轉(zhuǎn)自：csdn論壇
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
