v-if 和 v-show 区别

面试速答（30 秒版 TL;DR）

• v-if：真实的条件渲染，条件为假时不会渲染（DOM 不存在），切换会触发创建/销毁（或挂载/卸载）流程。
• v-show：始终渲染，靠 display: none 隐藏/显示，DOM 一直在。
• 怎么选：
  • 切换频繁：用 v-show 更省（少做创建销毁）。
  • 条件很少变、或初始不展示：用 v-if 更省（少渲染一次）。

---

关键差异（面试官真正想听的）

• 成本模型不同：
  • v-if：切换成本高（重新 patch、可能重建组件实例），但初始为 false 时几乎零成本。
  • v-show：初始成本高（要渲染一次），切换成本低（改样式）。
• 生命周期影响：
  • v-if 切换会触发组件的挂载/卸载相关生命周期（Vue 2 是 created/mounted/destroyed，Vue 3 是 onMounted/onUnmounted 等）。
  • v-show 不会卸载组件实例，只是隐藏。

---

常见追问

Q1：能不能 v-if 和 v-for 写在一起？

不推荐。v-for 优先级更高（不同版本细节可能不同），会带来可读性和性能问题。更好的写法是：

• 先把列表过滤成一个 computed 结果，再 v-for。
• 或者外层用包裹元素做 v-if。

Q2：v-show 会不会影响可访问性？

display: none 的元素通常不会被读屏器读取，也不会占据布局；如果你要“视觉隐藏但可访问”，要用更合适的 CSS 方案，而不是 v-show。