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>总结
简单记忆：
- v-if：条件渲染，适合"要不要"的场景
- v-show：显示切换，适合"显示/隐藏"频繁切换的场景
选择原则：
- 运行时条件很少改变 → 使用
v-if - 需要频繁切换 → 使用
v-show - 需要懒加载或条件复杂 → 使用
v-if - 需要保持状态或性能优化切换 → 使用
v-show