面试题：v-if 和 v-for 在 Vue 中的优先级是什么？如果它们同时出现，应该如何优化以获得更好的性能？

在 Vue 中，v-if 和 v-for 是常用的指令，但它们同时出现在同一个元素上时，可能会导致性能问题或不符合预期的行为。以下是关于它们的优先级和优化方法的详细说明：

1. `v-if` 和 `v-for` 的优先级

Vue 2：v-for 的优先级高于 v-if。
Vue 3：v-if 的优先级高于 v-for。

Vue 2 的行为

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

在 Vue 2 中，会先执行 v-for 循环，再对每个元素执行 v-if 判断。
这意味着即使 item.isActive 为 false，v-for 仍然会遍历所有元素，导致性能问题。

Vue 3 的行为

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

在 Vue 3 中，会先执行 v-if 判断，如果条件为 false，则不会执行 v-for。
但如果 v-if 依赖于 v-for 的变量（如 item.isActive），会导致编译错误。

2. 同时使用 `v-if` 和 `v-for` 的问题

性能问题：v-for 会遍历所有元素，即使某些元素不需要渲染。
逻辑混乱：v-if 和 v-for 的优先级可能导致不符合预期的行为。
代码可读性差：将逻辑和渲染混合在一起，难以维护。

3. 优化方法

3.1 使用计算属性过滤数据

将 v-if 的逻辑移到计算属性中，提前过滤数据。

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

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

优点：逻辑清晰，性能优化明显。
适用场景：v-if 的条件依赖于 v-for 的变量。

3.2 将 `v-if` 移到外层元素

将 v-if 放在外层元素上，避免在循环中重复判断。

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

<script>
export default {
  data() {
    return {
      isListVisible: true,
      items: [
        { id: 1, name: 'Task 1' },
        { id: 2, name: 'Task 2' },
        { id: 3, name: 'Task 3' },
      ],
    };
  },
};
</script>

优点：避免不必要的循环。
适用场景：v-if 的条件不依赖于 v-for 的变量。

3.3 使用 `<template>` 标签

将 v-if 和 v-for 分开，避免直接在同一元素上使用。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Task 1', isActive: true },
        { id: 2, name: 'Task 2', isActive: false },
        { id: 3, name: 'Task 3', isActive: true },
      ],
    };
  },
};
</script>

优点：逻辑清晰，避免优先级问题。
适用场景：v-if 的条件依赖于 v-for 的变量。

4. 总结

方法	优点	适用场景
计算属性过滤数据	逻辑清晰，性能优化明显	`v-if` 的条件依赖于 `v-for` 的变量
将 `v-if` 移到外层元素	避免不必要的循环	`v-if` 的条件不依赖于 `v-for` 的变量
使用 `<template>` 标签	逻辑清晰，避免优先级问题	`v-if` 的条件依赖于 `v-for` 的变量