Vue 开发：v-if 与 v-show 完整技术文档

文档说明

本文独立整理 v-if / v-show 语法、示例、底层原理、区别、使用场景、避坑规则，可直接作为开发手册、面试笔记、学习存档使用，适配 Vue2 / Vue3 全版本。

---

一、核心定义

1. v-if

作用：条件渲染，真实创建 / 销毁 DOM 元素

• 条件为 true：渲染生成 DOM 节点
• 条件为 false：直接移除 DOM，页面源码中完全不存在该标签
• 支持配套：v-else、v-else-if
• 支持 <template> 分组渲染

2. v-show

作用：条件显示 / 隐藏，仅控制 CSS 样式

• 条件为 true：display: block 正常显示
• 条件为 false：display: none 隐藏
• DOM 始终存在页面中，只是看不见
• 不支持 v-else、不支持 <template>

---

二、v-if 完整用法 + 代码示例

基础单分支

<template>
  <div>
    <p v-if="isShow">我是 v-if 显示的内容</p>
    <button @click="isShow = !isShow">切换v-if</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(true)
</script>

多分支：v-if + v-else-if + v-else

vue

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else">不及格</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const score = ref(75)
</script>

配合 template 分组（不渲染多余 DOM 节点）

vue

<template>
  <div>
    <template v-if="isLogin">
      <p>欢迎登录</p>
      <p>个人中心</p>
    </template>
    <template v-else>
      <p>请先注册</p>
      <p>前往登录</p>
    </template>
  </div>
</template>

特点：<template> 只是逻辑包裹，不会生成额外 div 标签。

---

三、v-show 完整用法 + 代码示例

基础切换示例

vue

<template>
  <div>
    <p v-show="isShow">我是 v-show 控制的内容</p>
    <button @click="isShow = !isShow">切换v-show</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(true)
</script>

特点直观体现

浏览器开发者工具 Elements 里可以看到：

• 隐藏时：元素还在，多了 style="display: none;"
• 始终不会移除 DOM 结构

不支持写法（错误示范）

vue

<!-- 错误：v-show 不能搭配 v-else -->
<p v-show="flag">显示</p>
<p v-else>隐藏</p>

<!-- 错误：v-show 不能用在 template -->
<template v-show="flag">
  <p>测试</p>
</template>

---

四、底层原理深度对比

v-if 底层

1. 基于 Vue 编译渲染机制
2. 条件为 false：不创建 VNode，不生成真实 DOM
3. 切换时：重新创建 / 销毁 DOM，会触发组件生命周期
4. 惰性渲染：初始条件为 false，一开始完全不渲染

v-show 底层

1. 编译时始终生成 VNode 和真实 DOM
2. 仅在运行时切换 CSS 的 display 属性
3. 切换不触发组件生命周期，只改样式
4. 初始不管真假，DOM 都会渲染到页面

---

五、v-if vs v-show 核心区别对照表

表格

对比维度	v-if	v-show
控制原理	销毁 / 创建 DOM 节点	切换 CSS display 样式
DOM 存在	false 时 DOM 不存在	始终存在，仅隐藏
切换开销	大（重建 DOM、重新渲染）	极小（仅改 CSS）
初始渲染开销	条件为 false 时开销极小	无论真假都要渲染 DOM
支持 v-else	支持	不支持
支持 template	支持	不支持
触发生命周期	切换会触发挂载 / 销毁	完全不触发
适用场景	一次性渲染、权限控制、很少切换	频繁切换显示隐藏

---

六、开发使用选型规则（必记）

1. 频繁切换 显示 / 隐藏（弹窗、Tab 切换、下拉菜单）

   👉 优先用 v-show

2. 权限控制、页面一次性渲染、条件基本不变（管理员可见、登录后显示）

   👉 优先用 v-if

3. 初始页面加载性能要求高，默认隐藏大块内容

   👉 用 v-if，减少首次 DOM 渲染数量

4. 需要多分支判断（if/else-if/else）

   👉 只能用 v-if

---

七、高频避坑规则

1. v-if 和 v-for 不要写在同一个标签上

   Vue 中 v-if 优先级更高，会先判断条件再循环，容易报错、性能差；

   规范：把 v-if 移到外层 <template>。

2. v-show 无法控制组件生命周期

   如果隐藏后需要清理定时器、事件监听，不能用 v-show，必须用 v-if。

3. v-if 可以配合 key 强制重新渲染

   同一组件 v-if 切换复用实例时，加 key 可强制销毁重建。

---

八、总结口诀

• 频繁切换用 show，销毁重建用 if
• show 藏 DOM 还在，if 假直接删掉
• 分支判断只能 if，template 分组也用 if
• 首屏优化选 v-if，弹窗 Tab 用 v-show

我可以再给你补充一份：v-if 和 v-for 正确搭配、错误搭配 的标准示例，做成规范文档补充版，需要吗？