当面试官问你
v-if和v-show的区别和使用场景时，这时候你回答组件频繁切换用v-show，不频繁切换用v-if。这样就显得你太low了。
首先我们来看看区别
| 特性 | v-if | v-show |
|---|---|---|
| 实现方式 | 条件渲染（动态添加/移除 DOM 元素） | CSS 切换（display: none） |
| 初始渲染成本 | 若条件为 false，不渲染元素 | 无论条件如何，元素始终会渲染 |
| 切换开销 | 高（触发组件生命周期） | 低（仅修改 CSS） |
| DOM 结构 | 元素从 DOM 中移除 | 元素保留在 DOM 中 |
| 对生命周期的影响 | 触发 unmounted 和 mounted | 无生命周期触发 |
然后我们来看看他们的使用场景
首先组件频繁切换用 v-show ，不频繁切换用 v-if 这句话本身没什么太大的问题，但是带入到实际业务场景中就不是那么够用了。根据上面的区别可以列举出以下几种应用场景。
v-if 的应用场景
- 条件稳定的渲染：当元素或组件的显示状态在运行时很少改变时（例如权限控制、功能模块按需加载）
- 重置组件状态：当需要完全重置组件内部状态时（例如切换表单后清除输入）
v-show 的应用场景
- 高频切换的 UI 元素：例如选项卡切换、折叠面板、模态框的显示/隐藏
- 保留组件状态：需要保持组件内部状态（如输入框内容、滚动位置）不被销毁时。
总结
- 优先
v-show：高频切换、简单 UI 元素、保留组件状态。 - 优先
v-if：条件稳定、需要重置组件状态。
