v-if与v-for为什么不能连用？以及解决方案

v-if与v-for不推荐在同一元素上使用

在vue2中，  v-for比v-if优先级高，每一次都需要遍历整个数组，造成不必要的计算，影响性能。即使100个list中只需要使用一个数据，也会循环整个数组

解决方案

场景1：每项都有自己的状态

        例：v-for="user in users" v-if="user.isActive"。将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

场景2：有公共的状态

        例：v-for="user in users" v-if="shouldShowUsers"。将 v-if 移动至外部容器元素上 (比如 ul、ol),或者可以在外层弄个templete标签把if加上去。