vue：v-for与v-if作用于同一元素会产生什么后果

由于v-for的优先级比v-if高，所以每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

结论：⚠️永远不要把 v-if 和 v-for 同时用在同一个元素上。

解决办法：

1、用computed处理

• 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

2、在v-for的外层或内层包裹一个元素来使用v-if

• 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。