为什么避免 v-if 和 v-for 一起用？

避免在 Vue 中将 v-if 和 v-for 一起使用在同一个元素上，主要是因为它们会导致一些潜在的性能问题和逻辑复杂性。以下是几个主要的原因：

(1)性能问题

当 v-if 和 v-for 同时使用时，Vue 会在每次循环渲染时重新计算 v-if 指令的值。这会导致额外的性能开销，尤其是在处理大量数据时。此外，由于 v-for 的优先级高于 v-if，Vue 会首先为每一个数组或对象元素创建 DOM 元素，然后再根据 v-if 的条件来销毁其中一部分。这实际上是一种资源浪费，因为很多被创建的 DOM 元素可能最终不会被渲染到页面上。

(2)逻辑复杂性

在同一个元素上同时使用 v-if 和 v-for 可能会使代码逻辑变得复杂。特别是当 v-if 的条件与循环的每一项都相关时，这会增加代码的阅读难度和维护成本

(3)渲染问题

在某些情况下，同时使用 v-if 和 v-for 可能会导致意外的渲染结果。例如，如果 v-if 的条件在循环的某个时刻发生了变化，那么可能会导致 DOM 结构的突然变化，从而影响用户的体验。