v-if 和v-for

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐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>
————————————————
版权声明：本文为CSDN博主「零度的遇见」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_66902855/article/details/124382532