前端八股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 无 key4.4 为什么不能用 index 做 key高频考点五、面试标准满分回答Q1v-for 和 v-if 为什么不能一起用Q2v-for 中的 key 有什么作用为什么不能用 index六、总结对比表一、v-for 详解1.1 作用v-for 是循环指令用于遍历数组或对象渲染列表必须绑定 key 提升性能。1.2 语法template !-- 遍历数组 -- div v-for(item, index) in list :keyindex {{ item }} /div !-- 遍历对象 -- div v-for(value, key, index) in obj :keykey {{ key }}: {{ value }} /div !-- 遍历数字1-10 -- div v-forn in 10 :keyn{{ n }}/div !-- 遍历字符串 -- div v-forchar in hello :keychar{{ char }}/div /template1.3 要点要点说明必须绑定 key提高 Vue 复用 DOM、diff 效率可遍历类型数组、对象、数字、字符串参数顺序数组(item, index)对象(value, key, index)二、v-if 详解2.1 作用v-if 是条件渲染指令根据表达式真假创建或销毁 DOM。2.2 语法template !-- 单独使用 -- div v-ifisShow显示/div !-- v-else -- div v-ifisLogin欢迎回来/div div v-else请先登录/div !-- v-else-if -- div v-ifstatus success成功/div div v-else-ifstatus loading加载中/div div v-else失败/div !-- 支持 template 批量渲染 -- template v-ifisShow h2标题/h2 p内容/p /template /template2.3 v-if vs v-show对比v-ifv-show控制方式创建/销毁 DOM切换 display: noneDOM 存在性假时不存在始终存在切换开销高低初始开销低假时不渲染高总是渲染支持 template✅❌支持 v-else✅❌适用场景很少切换频繁切换三、高频面试坑点v-for 和 v-if 不能用在同一个标签上3.1 错误示例!-- ❌ 不推荐 -- div v-foritem in list v-ifitem.isActive :keyitem.id {{ item.name }} /div3.2 原因v-for 优先级比 v-if 高会先循环全部项再逐个判断 v-if造成性能浪费// 本质执行逻辑简化 // 即使只有 1 项符合条件也要遍历全部 1000 条数据 list.forEach(item { if (item.isActive) { // 渲染 DOM } })3.3 正确写法!-- ✅ 方式1在外层套 template -- template v-foritem in list :keyitem.id div v-ifitem.isActive {{ item.name }} /div /template !-- ✅ 方式2提前在 computed 里过滤好数组 -- template div v-foritem in activeList :keyitem.id {{ item.name }} /div /template script setup import { computed } from vue const list ref([...]) const activeList computed(() list.value.filter(item item.isActive) ) /script !-- ✅ 方式3v-show 替代如果只是隐藏 -- div v-foritem in list v-showitem.isActive :keyitem.id {{ item.name }} /div四、v-for 里面的 key 作用4.1 一句话核心答案key 是 Vue 用来识别每个虚拟 DOM 节点的唯一标识方便 Vue 在列表更新时做高效的 DIFF 对比实现 DOM 复用和精准更新提升渲染性能。4.2 详细解释作用说明标识唯一性key 给每个列表项一个唯一 ID让 Vue 知道谁是谁提高 diff 效率有 keyVue 能精准找到变化项只更新该 DOM无 keyVue 只能暴力复用、顺序对比避免渲染错乱删除、逆序、插入时没有 key 容易出现复选框错位、过渡动画混乱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 次删除 有 keyid 对比 原列表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 :keyindex {{ item.name }} input typecheckbox / /div问题操作用 index 作为 key 的问题列表逆序index 变化所有 key 都变了Vue 会重新创建所有 DOM删除/插入后续项的 index 改变导致 DOM 复用错误表单错位input 框的内容会错位因为 key 变了性能大量不必要的 DOM 更新性能反而更差正确做法!-- ✅ 正确用后端返回的唯一 id -- div v-foritem in list :keyitem.id {{ item.name }} /div !-- ✅ 数据没有 id 时可以用 Symbol 或自定义唯一标识 -- div v-for(item, index) in list :keyitem-${item.name}-${item.age} {{ item.name }} /div五、面试标准满分回答Q1v-for 和 v-if 为什么不能一起用答因为 v-for 的优先级高于 v-if如果写在同一个标签上Vue 会先执行循环遍历所有数据再对每一项进行条件判断。这样即使大部分数据都不需要渲染也会先遍历一遍造成性能浪费。正确的做法是用 computed 先过滤数据或者在template外层包一层。Q2v-for 中的 key 有什么作用为什么不能用 index答key 是 Vue 虚拟 DOM diff 算法中识别节点的唯一标识。有 key 时Vue 能精准定位变化项只更新必要的 DOM没有 key 时Vue 只能按顺序对比容易造成错误渲染和性能问题。不能用 index 作为 key因为当列表发生逆序、删除、插入等操作时index 会变化导致 Vue 认为所有节点都变了从而无法复用 DOM反而降低性能还可能导致表单状态错位。应该使用后端返回的唯一 id 作为 key。六、总结对比表指令作用优先级必须配合注意事项v-for循环渲染高:key不要和 v-if 同标签v-if条件渲染中v-else-if/v-else切换开销大key节点标识-配合 v-for不要用 index