12、v-show 和 v-if 的区别-开发者社区

v-show 和 v-if 的区别

核心区别

1. 渲染方式

v-if（条件渲染）：

是"真正"的条件渲染
条件为false时，元素不会被渲染到 DOM中
条件为true时，才会创建和渲染元素

v-show（显示切换）：

无论条件是什么，元素始终会被渲染到 DOM中
只是通过 CSS 的display属性来控制显示/隐藏
条件为false时，添加display: none

<!-- v-if：条件为 false 时，DOM 中没有这个元素 --> <div v-if="isShow">Hello</div> <!-- v-show：条件为 false 时，DOM 中有这个元素，但 style="display: none" --> <div v-show="isShow">Hello</div>

2. 切换开销

特性	v-if	v-show
初始渲染开销	小（条件为 false 时不渲染）	大（总是渲染）
切换开销	大（销毁/重建元素）	小（只改变 CSS）
编译条件	惰性的（lazy）	不惰性

3. 生命周期

v-if：

<template> <div v-if="isShow"> <ChildComponent /> </div> </template>

条件为false→true：组件会创建，触发created、mounted等钩子
条件为true→false：组件会销毁，触发beforeUnmount、unmounted等钩子

v-show：

组件只会创建一次，生命周期钩子只触发一次
切换时不会触发生命周期钩子

4. 其他区别

v-if：

支持v-else-if和v-else
支持<template>标签
可以与v-for配合（但不推荐同时使用）

v-show：

不支持v-else-if和v-else
不支持<template>标签
不能用于组件的根元素（某些情况）

使用场景

使用 v-if 的场景

✅适合以下情况：

条件很少改变

<div v-if="userRole === 'admin'"> 管理员面板 </div>

初始条件为 false，且可能永远不会变为 true

<div v-if="showAdvancedSettings"> 高级设置（大多数用户不会打开） </div>

需要懒加载组件

<HeavyComponent v-if="needLoad" />

条件渲染多个元素

<template v-if="isLoggedIn"> <div>欢迎回来</div> <button>退出</button> </template> <template v-else> <button>登录</button> </template>

使用 v-show 的场景

✅适合以下情况：

频繁切换显示/隐藏

<!-- 模态框、下拉菜单等 --> <div v-show="isModalOpen" class="modal"> 模态框内容 </div>

Tab 切换

<div v-show="activeTab === 'tab1'">Tab 1 内容</div> <div v-show="activeTab === 'tab2'">Tab 2 内容</div> <div v-show="activeTab === 'tab3'">Tab 3 内容</div>

需要保持组件状态

<!-- 切换时保持表单输入状态 --> <form v-show="showForm"> <input v-model="formData.name" /> </form>

动画效果需要元素存在于 DOM

<transition> <div v-show="isVisible">带过渡效果的内容</div> </transition>

性能对比示例

<template> <div> <!-- 场景1：频繁切换 - 使用 v-show --> <button @click="toggle">切换</button> <div v-show="isShow"> 我会频繁切换（推荐 v-show） </div> <!-- 场景2：条件很少改变 - 使用 v-if --> <div v-if="userType === 'premium'"> 高级用户专属内容（推荐 v-if） </div> <!-- 场景3：大型组件懒加载 - 使用 v-if --> <HeavyChart v-if="showChart" /> </div> </template> <script> export default { data() { return { isShow: true, userType: 'premium', showChart: false } }, methods: { toggle() { this.isShow = !this.isShow // 频繁切换 } } } </script>