這 22 個(gè) Vue3 的實(shí)用技巧，你可能還不知道！

以下內(nèi)容來自公眾號(hào)逆鋒起筆，關(guān)注每日干貨及時(shí)送達(dá)

作者：月夕?

鏈接：https://juejin.cn/post/7005880217684148231

演示代碼使用 Vue3 + ts + Vite 編寫，但是也會(huì)列出適用于 Vue2 的優(yōu)化技巧，如果某個(gè)優(yōu)化只適用于 Vue3 或者 Vue2，我會(huì)在標(biāo)題中標(biāo)出來。

一、代碼優(yōu)化

v-for 中使用 key

• 不要使用可能重復(fù)的或者可能變化 key 值（控制臺(tái)也會(huì)給出提醒）
• 如果數(shù)組中的數(shù)據(jù)有狀態(tài)需要維持時(shí)（例如輸入框），不要使用數(shù)組的 index 作為 key 值，因?yàn)槿绻跀?shù)組中插入或者移除一個(gè)元素時(shí)，其后面的元素 index 將會(huì)變化，這回讓vue進(jìn)行原地復(fù)用時(shí)錯(cuò)誤的綁定狀態(tài)。
• 如果數(shù)組中沒有唯一的 key值可用，且數(shù)組更新時(shí)不是全量更新而是采用類似push，splice來插入或者移除數(shù)據(jù)時(shí)，可以考慮對(duì)其添加一個(gè) key 字段，值為 Symbol() 即可保證唯一。

何時(shí)使用何種key？

1. 數(shù)據(jù)沒有獨(dú)立的狀態(tài)
2. 數(shù)據(jù)不會(huì)進(jìn)行 增加/刪除 等會(huì)影響后面元素key變化的操作

哪何時(shí)使用 id 作為 key 呢？

1. 無法使用 index 作為 key 的時(shí)候

v-if/v-else-if/v-else 中使用 key

可能很多人都會(huì)忽略這個(gè)點(diǎn)

如果只有一個(gè) v-if ，沒有 v-else 或者 v-if-else的話，就沒有必要加 key 了

??<transition>
????<button
??????v-if="isEditing"
??????v-on:click="isEditing?=?false"
????>
??????Save
????button>
????<button
??????v-else
??????v-on:click="isEditing?=?true"
????>
??????Edit
????button>
??transition>

.v-enter-active,?.v-leave-active?{
??transition:?all?1s;
}
.v-enter,?.v-leave-to?{
??opacity:?0;
??transform:?translateY(30px);
}
.v-leave-active?{
??position:?absolute;
}

v-for 和 v-if 不要一起使用（Vue2）

此優(yōu)化技巧僅限于Vue2，Vue3 中對(duì) v-for 和 v-if 的優(yōu)先級(jí)做了調(diào)整

永遠(yuǎn)不要把?v-if?和?v-for?同時(shí)用在同一個(gè)元素上。 引至 Vue2.x風(fēng)格指南^[1]

注意： Vue3 中 v-if 優(yōu)先級(jí)高于 v-for，所以當(dāng) v-for 和 v-if 一起使用時(shí)效果類似于 Vue2 中把 v-if 上提的效果

<ul>
??<li?v-for="user?in?users"?v-if="user.active">
????{{?user.name?}}
??li>
ul>

<ul?v-if="active">
??<li?v-for="user?in?users">
????{{?user.name?}}
??li>
ul>

//?js
let?usersActive?=?computed(()=>users.filter(user?=>?user.active))

//?template
<ul>
????<li?v-for="user?in?usersActive">
??????{{?user.name?}}
????li>
ul>

合理的選擇 v-if 和 v-show

使用簡單的 計(jì)算屬性

應(yīng)該把復(fù)雜計(jì)算屬性分割為盡可能多的更簡單的 property。

• 易于測試

  當(dāng)每個(gè)計(jì)算屬性都包含一個(gè)非常簡單且很少依賴的表達(dá)式時(shí)，撰寫測試以確保其正確工作就會(huì)更加容易。

• 易于閱讀

  簡化計(jì)算屬性要求你為每一個(gè)值都起一個(gè)描述性的名稱，即便它不可復(fù)用。這使得其他開發(fā)者 (以及未來的你) 更容易專注在他們關(guān)心的代碼上并搞清楚發(fā)生了什么。

• 更好的“擁抱變化”

  任何能夠命名的值都可能用在視圖上。舉個(gè)例子，我們可能打算展示一個(gè)信息，告訴用戶他們存了多少錢；也可能打算計(jì)算稅費(fèi)，但是可能會(huì)分開展現(xiàn)，而不是作為總價(jià)的一部分。微信搜索readdot，關(guān)注后回復(fù)視頻教程獲取23種精品資料

  小的、專注的計(jì)算屬性減少了信息使用時(shí)的假設(shè)性限制，所以需求變更時(shí)也用不著那么多重構(gòu)了。

引至 Vue2風(fēng)格指南^[2]

let?price?=?computed(()=>{
??let?basePrice?=?manufactureCost?/?(1?-?profitMargin)
??return?(
??????basePrice?-
??????basePrice?*?(discountPercent?||?0)
??)
})

let?basePrice?=?computed(()?=>?manufactureCost?/?(1?-?profitMargin))
let?discount?=?computed(()?=>?basePrice?*?(discountPercent?||?0))
let?finalPrice?=?computed(()?=>?basePrice?-?discount)

functional 函數(shù)式組件（Vue2）

注意，這僅僅在 Vue2 中被作為一種優(yōu)化手段，在 3.x 中，有狀態(tài)組件和函數(shù)式組件之間的性能差異已經(jīng)大大減少，并且在大多數(shù)用例中是微不足道的。因此，在 SFCs 上使用?functional?的開發(fā)人員的遷移路徑是刪除該 attribute，并將?props?的所有引用重命名為?$props，將?attrs?重命名為?$attrs。

<template>
????<div?class="cell">
????????<div?v-if="value"?class="on">div>
????????<section?v-else?class="off">section>
????div>
template>

<script>
export?default?{
????props:?['value'],
}
script>

<template?functional>
????<div?class="cell">
????????<div?v-if="props.value"?class="on">div>
????????<section?v-else?class="off">section>
????div>
template>

<script>
export?default?{
????props:?['value'],
}
script>

• 沒有this（沒有實(shí)例）
• 沒有響應(yīng)式數(shù)據(jù)

拆分組件

<template>
??<div?:style="{?opacity:?number?/?300?}">
????<div>{{?heavy()?}}div>
??div>
template>

<script>
export?default?{
??props:?['number'],
??methods:?{
????heavy?()?{?/*?HEAVY?TASK?*/?}
??}
}
script>

<template>
??<div?:style="{?opacity:?number?/?300?}">
????<ChildComp/>
??div>
template>

<script>
export?default?{
??props:?['number'],
??components:?{
????ChildComp:?{
??????methods:?{
????????heavy?()?{?/*?HEAVY?TASK?*/?}
??????},
??????render?(h)?{
????????return?h('div',?this.heavy())
??????}
????}
??}
}
script>

使用局部變量

<template>
??<div?:style="{?opacity:?start?/?300?}">{{?result?}}div>
template>

<script>
import?{?heavy?}?from?'@/utils'

export?default?{
??props:?['start'],
??computed:?{
????base?()?{?return?42?},
????result?()?{
??????let?result?=?this.start
??????for?(let?i?=?0;?i?1000;?i++)?{
????????result?+=?heavy(this.base)
??????}
??????return?result
????}
??}
}
script>

<template>
??<div?:style="{?opacity:?start?/?300?}">
????{{?result?}}div>
template>

<script>
import?{?heavy?}?from?'@/utils'

export?default?{
??props:?['start'],
??computed:?{
????base?()?{?return?42?},
????result?()?{
??????const?base?=?this.base
??????let?result?=?this.start
??????for?(let?i?=?0;?i?1000;?i++)?{
????????result?+=?heavy(base)
??????}
??????return?result
????}
??}
}
script>

這里主要是優(yōu)化前后的組件的計(jì)算屬性 result 的實(shí)現(xiàn)差異，優(yōu)化前的組件多次在計(jì)算過程中訪問 this.base，而優(yōu)化后的組件會(huì)在計(jì)算前先用局部變量 base，緩存 this.base，后面直接訪問 base。

那么為啥這個(gè)差異會(huì)造成性能上的差異呢，原因是你每次訪問 this.base 的時(shí)候，由于 this.base 是一個(gè)響應(yīng)式對(duì)象，所以會(huì)觸發(fā)它的 getter，進(jìn)而會(huì)執(zhí)行依賴收集相關(guān)邏輯代碼。類似的邏輯執(zhí)行多了，像示例這樣，幾百次循環(huán)更新幾百個(gè)組件，每個(gè)組件觸發(fā) computed 重新計(jì)算，然后又多次執(zhí)行依賴收集相關(guān)邏輯，性能自然就下降了。

從需求上來說，this.base 執(zhí)行一次依賴收集就夠了，把它的 getter 求值結(jié)果返回給局部變量 base，后續(xù)再次訪問 base 的時(shí)候就不會(huì)觸發(fā) getter，也不會(huì)走依賴收集的邏輯了，性能自然就得到了提升。

引至 揭秘 Vue.js 九個(gè)性能優(yōu)化技巧^[4]

使用 KeepAlive

注意： 濫用 keep-alive 只會(huì)讓你的應(yīng)用變得更加卡頓，因?yàn)樗麜?huì)長期占用較大的內(nèi)存

事件的銷毀

function?scrollFun(){?/*?...?*/}
document.addEventListener("scroll",?scrollFun)

onBeforeUnmount(()=>{
??document.removeEventListener("scroll",?scrollFun)
})

function?scrollFun(){?/*?...?*/}
document.addEventListener("scroll",?scrollFun)

this.$once('hook:beforeDestroy',?()=>{
??document.removeEventListener("scroll",?scrollFun)
})

function?scrollFun(){?/*?...?*/}

export?default?{
??created()?{
????document.addEventListener("scroll",?scrollFun)
??},
??beforeDestroy(){
????document.removeEventListener("scroll",?scrollFun)
??}
}

圖片加載

采用合理的數(shù)據(jù)處理算法

/**
?*?數(shù)組轉(zhuǎn)樹形結(jié)構(gòu),時(shí)間復(fù)雜度O(n)
?*?@param?list?數(shù)組
?*?@param?idKey?元素id鍵
?*?@param?parIdKey?元素父id鍵
?*?@param?parId?第一級(jí)根節(jié)點(diǎn)的父id值
?*?@return?{[]}
?*/
function?listToTree?(list,idKey,parIdKey,parId)?{
????let?map?=?{};
????let?result?=?[];
????let?len?=?list.length;

????//?構(gòu)建map
????for?(let?i?=?0;?i?????????//將數(shù)組中數(shù)據(jù)轉(zhuǎn)為鍵值對(duì)結(jié)構(gòu)?(這里的數(shù)組和obj會(huì)相互引用，這是算法實(shí)現(xiàn)的重點(diǎn))
????????map[list[i][idKey]]?=?list[i];
????}

????//?構(gòu)建樹形數(shù)組
????for(let?i=0;?i?????????let?itemParId?=?list[i][parIdKey];
????????//?頂級(jí)節(jié)點(diǎn)
????????if(itemParId?===?parId)?{
????????????result.push(list[i]);
????????????continue;
????????}
????????//?孤兒節(jié)點(diǎn)，舍棄(不存在其父節(jié)點(diǎn))
????????if(!map[itemParId]){
????????????continue;
????????}
????????//?將當(dāng)前節(jié)點(diǎn)插入到父節(jié)點(diǎn)的children中（由于是引用數(shù)據(jù)類型，obj中對(duì)于節(jié)點(diǎn)變化，result中對(duì)應(yīng)節(jié)點(diǎn)會(huì)跟著變化）
????????if(map[itemParId].children)?{
????????????map[itemParId].children.push(list[i]);
????????}?else?{
????????????map[itemParId].children?=?[list[i]];
????????}
????}
????return?result;
}

其他

• 凍結(jié)對(duì)象（避免不需要響應(yīng)式的數(shù)據(jù)變成響應(yīng)式）
• 長列表渲染-分批渲染
• 長列表渲染-動(dòng)態(tài)渲染（vue-virtual-scroller^[5]）
• 微信搜索readdot，關(guān)注后回復(fù)視頻教程獲取23種精品資料
  
• ...

二、 首屏/體積優(yōu)化

• 體積
• 代碼分割
• 網(wǎng)絡(luò)

體積優(yōu)化

• 壓縮打包代碼: webpack 和 vite 的生產(chǎn)環(huán)境打包默認(rèn)就會(huì)壓縮你的代碼，這個(gè)一般不需要特殊處理，webpack 也可以通過對(duì)應(yīng)的壓縮插件手動(dòng)實(shí)現(xiàn)

• 取消 source-map: 可以查看你的打包產(chǎn)物中是否有 .map 文件，如果有你可以將 source-map 的值設(shè)置為false或者空來關(guān)閉代碼映射（這個(gè)占用的體積是真的大）

• 打包啟用 gizp 壓縮: 這個(gè)需要服務(wù)器也開啟允許 gizp 傳輸，不然啟用了也沒啥用（ webpack 有對(duì)應(yīng)的 gzip 壓縮插件，不太版本的 webpack 壓縮插件可能不同，建議先到官網(wǎng)查詢）

代碼分割

• 路由懶加載
• 異步組件

網(wǎng)絡(luò)

參考資料