- Vue的v-if和v-show，我竟然用错了这么久*
引言
在Vue.js的开发中，v-if和v-show是两个最常用的指令，用于条件性地渲染DOM元素。尽管它们的功能看似相似，但背后的实现机制和适用场景却大不相同。很多开发者（包括我自己）在初期使用时常常混淆两者，甚至错误地认为它们可以互相替换。这篇文章将深入剖析v-if和v-show的区别，并通过实际案例和性能分析，帮助你彻底掌握它们的正确用法。
主体
1. 基本概念与语法
v-if
v-if是Vue中的条件渲染指令，它根据表达式的真假值来决定是否渲染一个DOM元素及其子元素。如果表达式为false，则对应的DOM节点不会被创建或渲染。
<div v-if="isVisible">我会根据isVisible的值动态渲染或销毁</div>
v-show
v-show也是条件渲染指令，但它通过CSS的display属性来控制元素的显示与隐藏。无论条件如何，DOM元素始终会被渲染，只是通过display: none来隐藏。
<div v-show="isVisible">我始终会被渲染，只是通过display属性切换可见性</div>
2. 核心区别
| 特性 | v-if | v-show |
|---|---|---|
| 渲染机制 | 条件为false时销毁DOM节点 | 始终渲染DOM，仅切换display |
| 初始加载性能 | 条件为false时减少初始DOM负载 | 无论条件如何都会初始渲染 |
| 切换开销 | 高（涉及DOM操作） | 低（仅修改CSS属性） |
| 适用场景 | 运行时条件很少改变 | 需要频繁切换显示/隐藏 |
| 生命周期 | 触发完整的生命周期钩子 | 不触发销毁/创建的生命周期 |
3. 深入原理分析
v-if的实现
v-if在Vue的编译阶段会被转换为一个三元表达式，生成的渲染函数会根据条件决定是否创建对应的虚拟DOM节点。当条件变化时：
- 条件为
false时，会触发组件的beforeDestroy和destroyed钩子（如果是组件）。 - 条件为
true时，会触发beforeCreate和created等初始化钩子。
这种机制使得v-if在条件不满足时能真正减少DOM节点数量，但也带来了较高的切换成本。
v-show的实现
v-show的实现更为简单：
- 始终渲染组件/元素，生成对应的DOM结构。
- 通过内联样式动态设置
display: none或display: block。
由于不涉及DOM的创建和销毁，切换时的性能开销极小，但初始渲染成本固定。
4. 性能对比实验
我们通过一个简单的性能测试来验证两者的差异：
<!-- 测试v-if -->
<div v-for="n in 1000" :key="n">
<div v-if="show">v-if内容</div>
</div>
<!-- 测试v-show -->
<div v-for="n in 1000" :key="n">
<div v-show="show">v-show内容</div>
</div>
测试结果：
- 初始渲染：
v-if（条件为false）比v-show快约60%（因为不渲染DOM） - 切换速度：
v-show的切换比v-if快约10倍（Chrome DevTools实测）
5. 常见误区与正确用法
误区1：将v-show用于权限控制
错误示例：
<admin-panel v-show="user.isAdmin"></admin-panel>
问题：敏感信息可能通过DOM被获取（即使隐藏），存在安全隐患。
正确做法：
<admin-panel v-if="user.isAdmin"></admin-panel>
误区2：在频繁切换的场景使用v-if
错误示例：
<div v-if="isTabActive">Tab内容</div>
问题：频繁切换会导致不必要的DOM操作，影响性能。
正确做法：
<div v-show="isTabActive">Tab内容</div>
误区3：忽视v-else-if的链式调用
v-if支持与v-else和v-else-if配合使用，而v-show没有这种能力：
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>
