v-if与v-show的区别

对比维度 v-if v-show
渲染机制 条件为真时创建DOM,为假时销毁DOM 始终渲染DOM,通过 display:none 切换
切换成本 高(涉及销毁/重建) 低(仅切换CSS)
初始渲染成本 惰性(假时不渲染) 较高(无论真假都渲染)
是否支持 v-else ✅ 支持 ❌ 不支持
组件状态保留 切换会重置组件状态 切换会保留组件状态
适用场景 权限控制、不常变的页面切换 Tab切换、下拉菜单、高频显示切换
posted @ 2026-07-17 08:49  小肥123  阅读(5)  评论(0)    收藏  举报