v-if 和 v-show 机制不同：v-if 是条件渲染，销毁/重建 dom；v-show 是条件显示，仅切换 display 样式。频繁切换用 v-show，初始不渲染或重型组件用 v-if，二者不可混用同一元素。
v-if 和 v-show 看似都能控制元素显隐，但底层机制完全不同：v-if 是“条件渲染”，切换时真正销毁/重建 DOM；v-show 是“条件显示”，仅通过 CSS 的 display: none 切换可见性。性能差异就源于此——不是谁更快，而是谁更适合当前场景。
频繁切换时优先用 v-show
如果一个元素需要反复显示/隐藏（比如模态框、下拉菜单、Tab 面板），v-show 更合适。它只改变样式，不触发组件的创建/销毁流程，没有编译、挂载、响应式初始化等开销。
- 适合按钮点击触发的弹窗、鼠标悬停展开的导航栏、左右切换的轮播项
- 子组件内有定时器、事件监听或异步请求时，v-if 可能导致重复注册或内存泄漏，v-show 能保持状态稳定
- 注意：v-show 对初始为 false 的元素仍会渲染 DOM，只是隐藏，所以首次加载略重
条件复杂或初次渲染概率低时选 v-if
v-if 支持完整的 JavaScript 表达式，支持与 v-else / v-else-if 连用，且具备惰性：条件为假时，内部模板根本不会解析、编译，也不会创建组件实例。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章