v-if和v-for谁优先级最高

在 Vue 中，v-for 的优先级比 v-if 更高。这意味着当 v-for 和 v-if 同时出现在同一个元素上时，v-for 会先被解析，然后再考虑 v-if。

例如，假设我们有一个数组，我们想要根据某个条件来仅仅渲染其中的一部分。我们可能会尝试使用 v-if 指令来实现：

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

但是这样做会有问题，因为 v-for 的优先级比 v-if 高，意味着 v-if 只会在每次循环时被考虑一次，而不是在每个元素中单独考虑。这可能会导致不必要的渲染，因为一些不需要渲染的元素仍然会被循环和渲染出来。

因此，为了避免这个问题，我们应该把 v-if 放在父元素中，并在内部使用一个 computed 属性来进行过滤，例如：

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

computed: {
  filteredItems() {
    return this.items.filter(item => item.visible);
  }
}

这样，我们就能够确保只有需要渲染的元素被渲染，从而提高应用的性能。