前端八股Vue（6）---v-if和v-for

目录

• 一、v-for 详解
• 1.1 作用
• 1.2 语法
• 1.3 要点
• 二、v-if 详解
• 2.1 作用
• 2.2 语法
• 2.3 v-if vs v-show
• 三、高频面试坑点：v-for 和 v-if 不能用在同一个标签上
• 3.1 错误示例
• 3.2 原因
• 3.3 正确写法
• 四、v-for 里面的 key 作用
• 4.1 一句话核心答案
• 4.2 详细解释
• 4.3 图解：有 key vs 无 key
• 4.4 为什么不能用 index 做 key？（高频考点）
• 五、面试标准满分回答
• Q1：v-for 和 v-if 为什么不能一起用？
• Q2：v-for 中的 key 有什么作用？为什么不能用 index？
• 六、总结对比表

一、v-for 详解

1.1 作用

v-for 是循环指令，用于遍历数组或对象渲染列表，必须绑定 key 提升性能。

1.2 语法

<template> <!-- 遍历数组 --> <div v-for="(item, index) in list" :key="index"> {{ item }} </div> <!-- 遍历对象 --> <div v-for="(value, key, index) in obj" :key="key"> {{ key }}: {{ value }} </div> <!-- 遍历数字（1-10） --> <div v-for="n in 10" :key="n">{{ n }}</div> <!-- 遍历字符串 --> <div v-for="char in 'hello'" :key="char">{{ char }}</div> </template>

1.3 要点

二、v-if 详解

2.1 作用

v-if 是条件渲染指令，根据表达式真假创建或销毁 DOM。

2.2 语法

<template> <!-- 单独使用 --> <div v-if="isShow">显示</div> <!-- v-else --> <div v-if="isLogin">欢迎回来</div> <div v-else>请先登录</div> <!-- v-else-if --> <div v-if="status === 'success'">成功</div> <div v-else-if="status === 'loading'">加载中</div> <div v-else>失败</div> <!-- 支持 template 批量渲染 --> <template v-if="isShow"> <h2>标题</h2> <p>内容</p> </template> </template>

2.3 v-if vs v-show

三、高频面试坑点：v-for 和 v-if 不能用在同一个标签上

3.1 错误示例

<!-- ❌ 不推荐！！！ --> <div v-for="item in list" v-if="item.isActive" :key="item.id"> {{ item.name }} </div>

3.2 原因

v-for 优先级比 v-if 高，会先循环全部项，再逐个判断 v-if，造成性能浪费：

// 本质执行逻辑（简化） // 即使只有 1 项符合条件，也要遍历全部 1000 条数据 list.forEach(item => { if (item.isActive) { // 渲染 DOM } })

3.3 正确写法

<!-- ✅ 方式1：在外层套 <template> --> <template v-for="item in list" :key="item.id"> <div v-if="item.isActive"> {{ item.name }} </div> </template> <!-- ✅ 方式2：提前在 computed 里过滤好数组 --> <template> <div v-for="item in activeList" :key="item.id"> {{ item.name }} </div> </template> <script setup> import { computed } from 'vue' const list = ref([...]) const activeList = computed(() => list.value.filter(item => item.isActive) ) </script> <!-- ✅ 方式3：v-show 替代（如果只是隐藏） --> <div v-for="item in list" v-show="item.isActive" :key="item.id"> {{ item.name }} </div>

四、v-for 里面的 key 作用

4.1 一句话核心答案

key 是 Vue 用来识别每个虚拟 DOM 节点的唯一标识，方便 Vue 在列表更新时做高效的 DIFF 对比，实现 DOM 复用和精准更新，提升渲染性能。

4.2 详细解释

4.3 图解：有 key vs 无 key

无 key（索引对比）： 原列表：A B C D 新列表：A C D Vue 对比： 位置0: A → A ✅ 复用 位置1: B → C ❌ 更新（但 B 应该是删除） 位置2: C → D ❌ 更新 位置3: D → 无 ❌ 删除 结果：2 次更新 + 1 次删除 有 key（id 对比）： 原列表：A(id:1) B(id:2) C(id:3) D(id:4) 新列表：A(id:1) C(id:3) D(id:4) Vue 对比： id:1 存在 ✅ 复用 id:2 不存在 ❌ 删除 id:3 存在 ✅ 复用 id:4 存在 ✅ 复用 结果：1 次删除，0 次更新

4.4 为什么不能用 index 做 key？（高频考点）

<!-- ❌ 错误：用 index 做 key --> <div v-for="(item, index) in list" :key="index"> {{ item.name }} <input type="checkbox" /> </div>

问题：

正确做法：

<!-- ✅ 正确：用后端返回的唯一 id --> <div v-for="item in list" :key="item.id"> {{ item.name }} </div> <!-- ✅ 数据没有 id 时，可以用 Symbol 或自定义唯一标识 --> <div v-for="(item, index) in list" :key="`item-${item.name}-${item.age}`"> {{ item.name }} </div>

五、面试标准满分回答

Q1：v-for 和 v-if 为什么不能一起用？

答：因为 v-for 的优先级高于 v-if，如果写在同一个标签上，Vue 会先执行循环遍历所有数据，再对每一项进行条件判断。这样即使大部分数据都不需要渲染，也会先遍历一遍，造成性能浪费。正确的做法是用 computed 先过滤数据，或者在<template>外层包一层。

Q2：v-for 中的 key 有什么作用？为什么不能用 index？

答：key 是 Vue 虚拟 DOM diff 算法中识别节点的唯一标识。有 key 时，Vue 能精准定位变化项，只更新必要的 DOM；没有 key 时，Vue 只能按顺序对比，容易造成错误渲染和性能问题。

不能用 index 作为 key，因为当列表发生逆序、删除、插入等操作时，index 会变化，导致 Vue 认为所有节点都变了，从而无法复用 DOM，反而降低性能，还可能导致表单状态错位。应该使用后端返回的唯一 id 作为 key。

六、总结对比表