v-show 和 v-if 的区别
v-show和 v-if都是 Vue 中用于条件性显示元素的指令，但它们在实现机制、性能特性和使用场景上有本质区别。
核心区别对比
| 特性 | v-if | v-show |
|---|---|---|
| 控制方式 | 条件渲染（是否渲染到DOM） | CSS 显示切换（display: none/block） |
| 初始渲染 | 条件为假时不渲染到 DOM | 无论真假都会渲染，只控制显示 |
| 切换开销 | 高（DOM 的创建/销毁） | 低（仅 CSS 切换） |
| 生命周期 | 切换时触发组件的创建/销毁 | 组件始终存在，只触发 CSS 变化 |
| 性能考量 | 适合不频繁切换的场景 | 适合频繁切换的场景 |
| 组合指令 | 可与 v-else、v-else-if使用 | 单独使用 |
| 初始条件为假 | 不编译，不占内存 | 编译但不显示，占内存 |
<template>支持 | ✅ 支持 | ❌ 不支持 |
使用场景指南
使用 v-if 的场景 ✅
-
初始条件为假，且很少变化
-
条件分支逻辑
-
减少初始页面大小
使用 v-show 的场景 ✅
-
频繁切换显示/隐藏
-
需要保持组件状态
选择建议
何时用 v-if？
- ✅ 条件很少改变
- ✅ 需要条件分支（
v-else、v-else-if） - ✅ 初始渲染性能重要
- ✅ 元素很少被用户看到
- ✅ 需要减少初始 DOM 节点数
何时用 v-show？
- ✅ 频繁切换显示/隐藏
- ✅ 切换性能要求高
- ✅ 需要保持组件状态
- ✅ 简单的显示/隐藏，不需要条件分支
- ✅ 初始渲染性能不重要
总结
| 指令 | 一句话总结 | 适用场景 |
|---|---|---|
| v-if | "真正的条件渲染" ，不满足条件时元素不存在于 DOM | 权限控制、懒加载、不频繁切换、条件分支 |
| v-show | "CSS 显示切换" ，元素始终在 DOM 中，只控制显示 | 频繁切换、保持状态、标签页、下拉菜单 |
黄金法则：
- 切换频繁 → 用 v-show
- 运行时条件很少改变 → 用 v-if
- 不确定时，优先用 v-if（除非有明确的频繁切换需求）
