Vue中的条件渲染与列表渲染
Vue 中 v-if、v-show、v-for 与 key 的使用边界和常见判断题。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 上位主题: vue3
- 相关机制: vue3-virtual-dom, vue3-performance-optimization
Vue中的条件渲染与列表渲染
条件渲染和列表渲染是 Vue 模板里最常见的控制结构。它们看起来只是语法问题，实际会直接影响组件更新行为和节点复用效果。
为什么要放在一起理解
因为很多模板层问题，本质都和“节点什么时候出现”“节点身份怎么保持”有关。
条件渲染：v-if 和 v-show
v-if
- 控制节点是否真正创建和销毁
- 适合条件变化不频繁的场景
v-show
- 节点通常还在，只是切换显示状态
- 适合频繁切换的场景
列表渲染：v-for
v-for 用来根据一组数据生成节点列表，但真正关键的是 key。
为什么 key 很重要
key 帮助 Vue 判断节点身份，从而更准确地复用、移动和更新节点。
如果 key 不稳定，就可能出现：
- 输入框状态错位
- 节点复用异常
- 组件局部状态混乱
为什么不建议随便用 index 作为 key
当列表有插入、删除、排序时，index 对应的“节点身份”会变化，导致 Vue 错把旧节点当成新节点继续复用。
一条最常见的判断题
- 频繁切换显示：优先
v-show - 条件稀少变化、需要懒创建：优先
v-if - 列表渲染时：优先稳定业务 ID 做
key
最短记忆方式
条件渲染看“节点要不要真的消失”，列表渲染看“节点身份稳不稳定”。
面试要点
来自 vue-v-if-vs-v-show-interview-question 的面试视角整理。
一句话回答
v-if 控制的是节点要不要真正渲染出来，v-show 控制的是节点渲染后要不要显示，所以前者更偏创建和销毁，后者更偏显示切换。
最稳的回答主线
v-if
- 条件不成立时，节点通常不会被渲染出来
- 切换时有创建和销毁成本
- 适合条件变化不频繁的场景
v-show
- 节点通常已经存在
- 本质更接近切换
display - 适合频繁显示和隐藏的场景
面试里一句很稳的话
如果是“是否出现”这个层级的问题，更像 v-if；如果只是“是否显示”，更像 v-show。
最短记忆方式
v-if 真删真建，v-show 主要切显示。