Vue 中 v-if 和 v-for 同时使用在同一个标签上的表现？

在 Vue 中，v-if 和 v-for 同时使用在同一个标签上时可能会导致意外行为，特别是在涉及到列表渲染时。这是因为 v-for 拥有比 v-if 更高的优先级。

当 v-if 和 v-for 同时存在于同一个标签上时，v-for 比 v-if 具有更高的优先级，意味着 v-if 将被视为应用在每个循环项上，而不是整个列表。这可能导致不必要的渲染和性能问题。

示例：

<div v-for="item in items" v-if="item.isActive">
  {{ item.text }}
</div>

在这种情况下，v-if="item.isActive" 将应用在每个 item 上。如果大多数 item 的 isActive 属性为 false，那些不满足条件的项也会被创建和渲染，造成性能上的浪费。

为了避免这种情况，建议将 v-if 移动到包裹元素或将其放置在不同的元素上，确保 v-for 作用的是需要循环的元素，而 v-if 控制整个元素是否显示。

示例：

<div v-for="item in items">
  <div v-if="item.isActive">
    {{ item.text }}
  </div>
</div>

这样可以确保 v-for 和 v-if 正确地应用在各自的作用域上，避免不必要的性能问题。