前端面试题187（vue v-for与v-if优先级）

在Vue中，v-for 和 v-if 是两个常用的指令，它们分别用于遍历数组渲染列表和条件性渲染元素。关于它们的优先级，Vue官方文档明确指出，在同一元素上同时使用 v-if 和 v-for 时，v-for 的优先级高于 v-if。这意味着 v-for 将比 v-if 有更高的执行优先级。

这种设计是因为v-for代表的是一个循环，它负责创建多个节点，而v-if是一个条件表达式，用来判断是否渲染这个节点。如果v-if的优先级高于v-for，那么在每次循环迭代中都会进行条件判断，这将导致不必要的性能开销。

为了避免潜在的性能问题并遵循Vue的最佳实践，当需要根据条件过滤列表时，推荐的做法是将v-if置于外层元素（包裹v-for的元素）或者使用计算属性来过滤数据源。

示例

不推荐的方式（尽管可以工作，但非最佳实践）：

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

推荐的方式1（将v-if置于外层）：

<ul v-if="hasActiveItems">
  <li v-for="item in filteredItems">
    {{ item.name }}
  </li>
</ul>

其中，hasActiveItems 和 filteredItems 可以是计算属性：

computed: {
  hasActiveItems() {
    return this.items.some(item => item.isActive);
  },
  filteredItems() {
    return this.items.filter(item => item.isActive);
  }
}

推荐的方式2（直接在计算属性中过滤）：

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

对应的计算属性：

computed: {
  activeItems() {
    return this.items.filter(item => item.isActive);
  }
}

这样不仅提高了代码的可读性和维护性，也优化了运行时的性能。