一、不应同时使用
v-for和v-if不应该一起使用。
原因：v-for比v-if优先，即每一次都需要遍历整个数组，影响速度。
例如重构项目的时候遇到的旧代码：
<div
v-for="(fileMsg,index) in fileMsgList"
:key="fileMsg.id"
v-if="index < 2"
>
<sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>
想要循环生成一系列组件块，但是不希望生成序号1之后的内容，同时用了v-if和v-for，那么，还是会根据整个数组生成所有组件块，之后才判断v-if让多余的小时，非常耗资源。
二、解决
1、必要情况下应该替换成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上层已经有 v-for循环了，此处只是取了上层循环对象中的一个数组继续作循环（其实这里项目遇到的就是这个问题），我想不出方法使用computed计算属性如何计算（获取不到多层循环后的此数组内容）。
也可以 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>
