面试题：v-if 和 v-show 区别？性能上怎么选？

一句话

• v-if：条件为假时 DOM 不存在（不渲染/会销毁），切换成本高。
• v-show：始终渲染，用 display: none 切换显示，初始渲染成本高、切换便宜。

原理

• v-if 是编译期指令，为 false 时对应子树不创建（或从 DOM 移除），为 true 时重新创建子树，内部子组件会走创建/销毁生命周期。
• v-show 绑定在元素上，本质是切换 style.display，节点一直在。

使用场景

场景	更常用
很少切换、条件复杂、子树很重	v-if（避免白占资源）
频繁显隐（如 Tab、手风琴动画）	v-show
需要权限控制且完全不挂载（减少敏感 DOM）	v-if

注意点

• v-if 与 v-for 不要同级用在同一元素上（Vue2 优先级与 Vue3 不同，易踩坑）；应拆外层或用 template、计算属性过滤列表。
• v-if 有 「惰性」：为 false 时内部不会加载（适合路由级、大组件按需挂载）。