v-if 适合低频切换、需销毁重建的场景，v-show 适合高频切换、需保留状态的场景；二者不可与 v-else 混用，多分支应统一用 v-if/v-else-if/v-else 或互斥 v-show。
选对指令，开发效率翻倍。v-if 和 v-show 都能控制元素显隐，但底层机制完全不同——用错一个，轻则卡顿，重则白屏或状态丢失。
v-if：真正的条件渲染，有销毁重建成本
v-if 是“惰性”的：条件为假时，对应 DOM 节点彻底不渲染，组件实例也不会被创建；条件为真时，才初始化、挂载、执行生命周期钩子（如 created、mounted）。适合切换频率低、内容复杂、或需严格隔离状态的场景。
- 适用场景：登录态切换（如未登录不加载用户仪表盘）、表单步骤页（每步组件独立逻辑）、权限路由模块（无权限直接不生成 DOM）
- 注意点：v-if 触发时会重新创建组件，data、watch、computed 全部重置；若依赖外部状态（如父组件传入的 prop），需确保重新渲染后仍能正确接收
- 技巧：配合 key 使用可强制刷新组件（例如 key="step-2" + v-if="step === 2"），避免复用导致的缓存问题
v-show：纯 CSS 切换，开销极小但始终存在
v-show 是“暴力显隐”：无论真假，DOM 始终存在，只是通过 display: none 控制可见性。组件始终保留在内存中，生命周期只执行一次（created → mounted），后续仅触发 updated。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 适用场景：高频切换的 UI 控件（如模态框、下拉菜单、Tab 标签页）、动画过渡（配合 transition）、需要保留内部状态（如输入框内容、滚动位置、表单校验结果）
- 注意点：v-show 的元素始终在 DOM 中，可能影响 SEO 或屏幕阅读器；若内含定时器、WebSocket 连接等副作用，需手动清理（推荐在 beforeUnmount 中处理）
- 技巧：可与 transition 结合实现淡入淡出：<div v-show="visible" class="fade">...，再配 .fade-enter-active/.fade-leave-active CSS
决策树：三步判断该用哪个
不用死记规则，按实际需求走流程：
立即学习“前端免费学习笔记（深入）”；
- 是否频繁切换（比如鼠标悬停、按钮点击）？→ 是 → 优先 v-show
- 是否首次渲染就确定不会出现（比如游客看不到后台管理入口）？→ 是 → 必须 v-if
- 是否需要每次显示都重置状态（如清空表单、重置图表数据）？→ 是 → v-if 更自然；否则 v-show 更省心
进阶提醒：别和 v-else/v-else-if 混用 v-show
v-else 和 v-else-if 只能紧跟在 v-if 或 v-else-if 后，且必须属于同一组条件分支。它们与 v-show 不兼容——写成 <div v-show="a">A</div><div v-else>B</div> 会报错或行为异常。需要多分支显隐时，统一用 v-if / v-else-if / v-else；若想保留 v-show 的性能优势，改用多个独立 v-show + 逻辑互斥（如 a && !b && !c）
