一拴疤、不應(yīng)同時(shí)使用
v-for和v-if不應(yīng)該一起使用永部。
原因：v-for比v-if優(yōu)先，即每一次都需要遍歷整個(gè)數(shù)組呐矾，影響速度苔埋。
例如重構(gòu)項(xiàng)目的時(shí)候遇到的舊代碼：
<div
v-for="(fileMsg,index) in fileMsgList"
:key="fileMsg.id"
v-if="index < 2"
>
<sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>
想要循環(huán)生成一系列組件塊，但是不希望生成序號(hào)1之后的內(nèi)容蜒犯，同時(shí)用了v-if和v-for组橄，那么，還是會(huì)根據(jù)整個(gè)數(shù)組生成所有組件塊罚随，之后才判斷v-if讓多余的小時(shí)玉工，非常耗資源。
二淘菩、解決
1遵班、必要情況下應(yīng)該替換成computed屬性。
computed: {
fileMsgListCom() {
return this.fileMsgList.filter((item, index) => {
return item < 2;
});
}
}
<div
class="file_name"
v-for="(fileMsg,index) in fileMsgListCom"
:key="fileMsg.id"
>
<sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>
2潮改、把 v-if 改成 v-show狭郑。
如果此 v-for上層已經(jīng)有 v-for循環(huán)了，此處只是取了上層循環(huán)對(duì)象中的一個(gè)數(shù)組繼續(xù)作循環(huán)（其實(shí)這里項(xiàng)目遇到的就是這個(gè)問(wèn)題）汇在，我想不出方法使用computed計(jì)算屬性如何計(jì)算（獲取不到多層循環(huán)后的此數(shù)組內(nèi)容）翰萨。
也可以 v-if 改成 v-show袜蚕，可以共存液兽。
<div
class="file_name"
v-for="(fileMsg,index) in file.documents"
:key="fileMsg.id"
v-show="index < 2"
>
<sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>
