Vue 中的 `v-if` 和 `v-show` 指令详解

bug：使用v-show的组件虽然不显示，但是还是占据了一格

1. 基本概念

v-if

• 作用：根据表达式的真假值条件性地渲染一块内容

• 特点：真正的条件渲染，会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建

v-show

• 作用：根据表达式真假值切换元素的 display CSS 属性

• 特点：无论初始条件如何，元素始终会被渲染并保留在 DOM 中，只是简单地切换 CSS 的 display 属性

2. 基本用法示例

html

<!-- v-if 示例 -->
<div v-if="isVisible">使用 v-if 控制显示</div>
​
<!-- v-show 示例 -->
<div v-show="isVisible">使用 v-show 控制显示</div>

3. 核心区别对比

4. 实现原理

v-if 实现原理

1. Vue 编译器将 v-if 编译为条件表达式

2. 当条件为 false 时：

   • 创建并插入一个空的注释节点作为占位符

   • 销毁条件块内的所有组件实例和 DOM 节点

3. 当条件变为 true 时：

   • 重新创建组件实例和 DOM 节点

   • 替换掉注释占位符

v-show 实现原理

1. Vue 编译器将 v-show 编译为指令

2. 无论初始条件如何，元素都会被渲染到 DOM 中

3. 通过内联样式控制元素的 display 属性：

   • 条件为 true：display: original（保持元素原有 display 值）

   • 条件为 false：display: none

5. 性能考量

• v-if 适用场景：

  • 初始条件为 false 时不需要渲染的内容

  • 切换频率较低的场景

  • 需要完整生命周期控制（如组件卸载时需要执行清理操作）

• v-show 适用场景：

  • 需要频繁切换显示/隐藏的内容

  • 初始条件不重要，但切换性能要求高的场景

  • 元素/组件初始化成本高（如包含复杂计算或 DOM 操作）

6. 进阶用法

v-if 与 v-else 配合使用

html

<div v-if="type === 'A'">类型 A</div>
<div v-else-if="type === 'B'">类型 B</div>
<div v-else>其他类型</div>

v-if 在 <template> 上使用

html

<template v-if="show">
  <h1>标题</h1>
  <p>内容段落</p>
</template>

7. 使用建议

1. 如果需要完全移除/添加 DOM 元素，使用 v-if

2. 如果需要频繁切换可见性，使用 v-show

3. 对于重要内容（如权限控制），优先使用 v-if 确保安全性

4. 对于初始渲染性能敏感的页面，合理使用 v-if 减少初始 DOM 数量

5. 对于动画/过渡效果，v-show 通常能提供更平滑的体验

8. 注意事项

• v-if 和 v-for 一起使用时，v-for 具有更高的优先级（Vue 2.x）

• 在 Vue 3 中，v-if 比 v-for 优先级更高

• 使用 v-show 时，元素始终会被渲染，可能影响页面初始加载性能

• v-show 不支持 <template> 元素，也不支持 v-else