v-if适用于条件稳定、低频切换场景，彻底销毁重建元素及子组件；v-show适用于高频切换场景，仅控制display属性，保持子组件状态和DOM存在。
v-if 和 v-show 都能控制元素显隐，但选哪个不看“习惯”，而要看切换频率、初始状态和子组件行为这三个关键点。
v-if 适合：条件稳定、不常切换的场景
v-if 是“真删真建”——条件为 false 时，元素连同它的子组件、事件监听器、内部状态，一并从 DOM 中彻底移除；条件变 true 时，重新编译、挂载、执行生命周期钩子（如 created、mounted）。
- 首次加载快：条件初始为 false，完全跳过渲染，减少 DOM 节点和内存占用
- 适合表单步骤、权限模块、弹窗内容等低频切换区域
- 注意：每次显示都会触发完整生命周期，不适合依赖 mounted 后缓存状态的组件
- 搭配 v-else / v-else-if 使用自然，语义清晰
v-show 适合：频繁切换、需保持状态的场景
v-show 是“假藏真留”——元素始终在 DOM 中，仅靠 display: none 控制可见性。它不销毁组件，也不重走生命周期。
- 切换极快：只改 CSS 属性，无编译、无挂载/卸载开销
- 适合标签页切换、折叠面板、开关控件等高频交互区域
- 子组件保持运行状态：计时器、表单输入、滚动位置、异步请求都不会中断
- 缺点：初始就渲染所有分支，DOM 节点多、内存占用略高
别忽略的隐藏影响
两者对子组件的影响差异很大，容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- v-if 下的子组件：每次显示都是全新实例，data 重置、watch 重绑、async setup 重执行
- v-show 下的子组件：始终存活，watch 持续监听，onMounted 只触发一次
- 含 第三方组件（如地图、富文本编辑器）时，v-if 可能触发反复初始化，v-show 更稳妥
- 用 v-if 做权限控制更安全（DOM 真不存在），v-show 仅视觉隐藏，需配合服务端校验
一个实用判断口诀
“常显常隐用 v-show，偶显偶隐用 v-if”——把“常/偶”换成具体业务节奏就能快速决策：
- 用户点击“展开详情”每天十几次 → v-show
- 登录后才显示“后台管理入口” → v-if
- 侧边栏菜单项根据角色动态生成 → v-if（结构变化大 + 不常切换）
- 搜索框下方的联想列表显隐 → v-show（高频、需保留输入上下文）
