Vue 2 vs Vue 3：v-if 和 v-for 的差异

在 Vue 2 和 Vue 3 中，v-if 和 v-for 是用于条件渲染和列表渲染的两个常用指令。虽然两个版本中它们的基本用法一致，但在某些情况下有差异和注意事项。

同时，这也是比较常见的 Vue 面试题之一。

1. 基本用法

1、v-if 用于条件渲染，当条件为 true 时，元素才会被渲染。

<!-- Vue 2 和 Vue 3 中的用法一致 -->
<div v-if="isVisible">This is visible</div>

2、v-for 用于渲染列表，通过迭代数组或对象的每一项生成一组元素。

<!-- Vue 2 和 Vue 3 中的用法一致 -->
<ul>
  <li v-for="item in items" :key="item.id">{
  { item.name }}</li>
</ul>

2. v-if 和 v-for 结合

在 Vue 2 和 Vue 3 ，如果在同一个元素上同时使用 v-if 和 v-for，它们的执行顺序是不同的。

- Vue 2，v-for 的优先级高于 v-if，这意味着即使某个列表项不满足 v-if 条件，它也仍然是先被 v-for 迭代，然后才根据 v-if 的条件决定是否渲染。

<!-- Vue 2 中的代码 -->
<template>
  <ul>
    <li v-for="