面试题：为什么不建议在 Vue 中同时使用 v-if 和 v-for？

在 Vue 中，同时使用 v-if 和 v-for 是不推荐的做法，主要原因如下：

1. 优先级问题

在 Vue 2 中，v-for 的优先级高于 v-if。这意味着 Vue 会先执行 v-for 循环，然后再对每个元素应用 v-if 条件。这种顺序可能导致以下问题：

性能问题：即使某些元素最终会被 v-if 过滤掉，Vue 仍然会先遍历整个列表，造成不必要的性能开销。
逻辑混乱：代码的可读性和可维护性降低，因为 v-for 和 v-if 的意图混合在一起。

示例

<!-- 不推荐 -->
<ul>
  <li v-for="item in items" v-if="item.isActive">
    {{ item.name }}
  </li>
</ul>

在这个例子中，Vue 会先遍历 items，然后再对每个 item 应用 v-if 条件。如果 items 很大，但只有少数元素满足 v-if 条件，这种写法会导致性能浪费。

2. 解决方案

为了避免上述问题，可以通过以下方式优化代码：

（1）使用计算属性过滤数据

将 v-if 的逻辑移到计算属性中，提前过滤数据，然后在模板中只使用 v-for。

<template>
  <ul>
    <li v-for="item in activeItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isActive: true },
        { id: 2, name: 'Item 2', isActive: false },
        { id: 3, name: 'Item 3', isActive: true }
      ]
    };
  },
  computed: {
    activeItems() {
      return this.items.filter(item => item.isActive);
    }
  }
};
</script>

（2）使用 `<template>` 标签

如果需要在模板中直接过滤数据，可以使用 <template> 标签结合 v-for 和 v-if，但将 v-if 放在外层。

<template v-for="item in items">
  <li v-if="item.isActive" :key="item.id">
    {{ item.name }}
  </li>
</template>

（3）使用 `v-show` 替代 `v-if`

如果条件变化频繁，且不需要完全移除 DOM 元素，可以使用 v-show 替代 v-if。

<ul>
  <li v-for="item in items" :key="item.id" v-show="item.isActive">
    {{ item.name }}
  </li>
</ul>

3. Vue 3 中的改进

在 Vue 3 中，v-if 的优先级高于 v-for，这意味着 v-if 会先执行，然后再执行 v-for。虽然这解决了 Vue 2 中的优先级问题，但仍然不建议同时使用 v-if 和 v-for，因为：

逻辑不清晰：v-if 和 v-for 混合使用会使代码难以理解。
性能问题：即使 v-if 先执行，仍然可能导致不必要的计算或渲染。

Vue 3 中的示例

<!-- Vue 3 中 v-if 优先级高于 v-for -->
<ul>
  <li v-if="shouldShowList" v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

4. 总结

问题	原因	解决方案
优先级问题	Vue 2 中 `v-for` 优先级高于 `v-if`，导致性能浪费。	使用计算属性过滤数据，或使用 `<template>` 标签分离逻辑。
逻辑混乱	`v-if` 和 `v-for` 混合使用，代码可读性差。	将 `v-if` 的逻辑移到计算属性中，或在模板中明确分离逻辑。
Vue 3 中的改进	Vue 3 中 `v-if` 优先级高于 `v-for`，但仍不推荐混合使用。	避免同时使用 `v-if` 和 `v-for`，优先使用计算属性或 `<template>` 标签。