v-if控制元素“是否存在”，条件假时完全移除DOM及子组件、不触发生命周期，适合低频切换；v-show控制“是否可见”，始终保留在DOM中仅切display样式，状态保留、切换快，适合高频切换。
Vue 中的 v-if 和 v-show 都能控制元素显隐，但底层逻辑完全不同——一个动 DOM，一个调 CSS。
v-if 是条件渲染，决定“要不要存在”
v-if 根据表达式真假，动态创建或销毁整个 DOM 节点及其子组件。条件为 false 时，元素完全不出现在 DOM 中，也不触发 mounted、created 等生命周期；条件变 true 时，才重新编译、挂载、执行完整初始化流程。
- 支持 v-else-if 和 v-else，可写多分支逻辑
- 可作用于 <template> 标签，批量控制多个元素的渲染
- 初始渲染开销小（条件假时不渲染），但切换开销大（涉及重建）
- 适合运行时条件极少变化的场景，比如用户登录态判断、页面权限开关
v-show 是显示控制，决定“要不要看见”
v-show 始终把元素渲染进 DOM，仅通过切换 display: none 或还原原始 display 值来控制可见性。它不销毁节点，也不影响子组件生命周期——mounted 只触发一次，数据和状态全程保留。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 不支持 v-else 系列指令，也不能用在 <template> 上
- 切换极快，只改样式，无重绘重排以外的额外开销
- 初始就要渲染所有内容，DOM 节点数固定，内存占用略高
- 适合高频切换的 UI 控件，比如折叠面板、标签页切换、表单字段显隐
怎么选？看三个关键信号
不用死记规则，抓住实际开发中的典型信号：
立即学习“前端免费学习笔记（深入）”；
- 这个区域第一次打开时本就不该出现？→ 选 v-if（避免无意义渲染）
- 用户会反复点开/收起同一块内容？→ 选 v-show（省掉重建成本）
- 里面嵌了子组件，且需要保持内部状态（如输入框内容、滚动位置）？→ 优先 v-show
- 要配合 v-else 实现互斥展示，或包裹多个元素？→ 只能用 v-if
特殊情况：可以混用
复杂界面中不必二选一。例如外层用 v-if 控制整个模块是否加载（如权限路由），模块内部用 v-show 管理 Tab 切换——既保首屏轻量，又保交互流畅。
