v-if 和 v-for

A, should not use
v-for v-if and should not be used together.
The reason: v-formore than v-ifa priority, that is, every time need to traverse the entire array, the impact speed.
For example the old code encountered when the reconstruction project:

<div
  v-for="(fileMsg,index) in fileMsgList"
  :key="fileMsg.id"
  v-if="index < 2"
>
  <sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>

Want to loop generates a series of component blocks, but do not want to generate content after the serial number of 1, simultaneously with the v-ifand v-for, then, or will generate all the components of the block according to the entire array, only after judge v-ifto allow excess hours, very resource intensive.
Second, the solution
1, if necessary, should be replaced with a computed property.

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, the v-ifchange v-show.
If this v-forupper layer has been v-forcirculating, and here just to take an array of objects in the upper cycle continues for recycling (in fact, the project encountered here is the problem), I can not think computed using the method to calculate how to calculate the property (get less than this array contents multilayer cycle).
Can also be v-ifchanged v-show, you can coexist.

<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>