v-if 和 v-for

一、不应同时使用
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>