为什么避免 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 结构的突然变化，从而影响用户的体验。

为了避免这些问题，Vue 官方建议不要在同一个元素上同时使用 v-if 和 v-for。相反，你可以使用一个 <template> 元素来包裹 v-for，然后在 <template> 的子元素上使用 v-if。这样，v-for 会首先遍历整个数组或对象，并为每一个元素创建一个 <template> 的副本（注意 <template> 元素本身不会被渲染到页面上），然后在这些副本中分别应用 v-if 条件。这种方式既保证了性能，又降低了代码的复杂性。