【前端每日基础】day39——v-if 和 v-for优先级

Vue.js 中，v-if 和 v-for 是两个常用的指令，用于条件渲染和列表渲染。它们的优先级是一个重要的概念，因为在某些情况下，这两个指令可能会同时应用在同一个元素上。

v-if 和 v-for 的优先级
v-for 的优先级高于 v-if：
当 v-for 和 v-if 同时存在于同一个元素上时，v-for 的优先级更高。也就是说，Vue 会首先处理 v-for 指令，然后在每个迭代中对元素进行 v-if 判断。
示例分析
示例 1: v-for 结合 v-if
假设我们有一个列表，其中我们希望只显示符合某个条件的项目。

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

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

在这个例子中，v-for 指令会首先执行，将 items 数组中的每个项目都迭代一次，然后对每个项目进行 v-if 判断。如果 item.isVisible 为 true，该项目会被渲染；否则不会渲染。

示例 2: 使用 computed 属性来优化
虽然上述方法可以正常工作，但每次迭代都要执行 v-if 判断，可能会有性能问题。我们可以在 computed 属性中预先过滤数组，以优化性能。

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

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

在这个优化版本中，我们使用了一个 computed 属性 visibleItems 来预先过滤出需要显示的项目，然后在模板中只使用 v-for 来迭代 visibleItems。这样可以避免在每次迭代中执行 v-if 判断，提高性能。

结论
v-for 的优先级高于 v-if，即 Vue 会先处理 v-for，然后在每个迭代中应用 v-if。
为了优化性能，可以在 computed 属性中预先过滤数据，而不是在模板中使用 v-for 和 v-if 同时存在的组合。
通过理解 v-if 和 v-for 的优先级，以及使用优化的方法，可以写出更高效的 Vue.js 代码。