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，可写多分支逻辑
• 可作用于 标签，批量控制多个元素的渲染
• 初始渲染开销小（条件假时不渲染），但切换开销大（涉及重建）
• 适合运行时条件极少变化的场景，比如用户登录态判断、页面权限开关

v-show 是显示控制，决定“要不要看见”

v-show 始终把元素渲染进 DOM，仅通过切换 display: none 或还原原始 display 值来控制可见性。它不销毁节点，也不影响子组件生命周期——mounted 只触发一次，数据和状态全程保留。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

• 不支持 v-else 系列指令，也不能用在
• 切换极快，只改样式，无重绘重排以外的额外开销
• 初始就要渲染所有内容，DOM 节点数固定，内存占用略高
• 适合高频切换的 UI 控件，比如折叠面板、标签页切换、表单字段显隐

怎么选？看三个关键信号

不用死记规则，抓住实际开发中的典型信号：

• 这个区域第一次打开时本就不该出现？→ 选 v-if（避免无意义渲染）
• 用户会反复点开/收起同一块内容？→ 选 v-show（省掉重建成本）
• 里面嵌了子组件，且需要保持内部状态（如输入框内容、滚动位置）？→ 优先 v-show
• 要配合 v-else 实现互斥展示，或包裹多个元素？→ 只能用 v-if

特殊情况：可以混用

复杂界面中不必二选一。例如外层用 v-if 控制整个模块是否加载（如权限路由），模块内部用 v-show 管理 Tab 切换——既保首屏轻量，又保交互流畅。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！