v-if 与 v-show 区别

文章目录前言一、v-if 条件渲染1.1 定义1.2 分支语法1.3 生命周期影响二、v-show 显示隐藏2.1 定义2.2 不支持的场景三、核心区别3.1 机制对比3.2 性能差异四、应用场景区分4.1 适合 v-if 的场景4.2 适合 v-show 的场景五、v-if 与 v-for 优先级5.1 Vue 2 vs Vue 35.2 Vue 3 推荐写法六、SSR 场景6.1 v-show 在 SSR 中的问题七、面试聚焦7.1 生命周期差异7.2 初始渲染开销八、易混淆点九、思考与练习总结前言v-if和v-show是 Vue 中控制元素显示与隐藏的两种方式理解它们的区别对性能优化至关重要。本篇会讲清楚v-if 的动态创建/销毁机制v-show 的 CSS 切换机制两者的性能差异与选型v-if 与 v-for 的优先级问题一、v-if 条件渲染1.1 定义v-if是条件渲染指令通过动态创建和销毁 DOM 节点来控制元素的显示与隐藏。template !-- 条件为 false 时元素完全不存在于 DOM 中 -- div v-ifshow显示内容/div /template1.2 分支语法template !-- v-if / v-else-if / v-else 分支 -- div v-iftype A类型 A/div div v-else-iftype B类型 B/div div v-else其他类型/div !-- 在 template 上使用 -- template v-ifshow h1标题/h1 p内容/p /template /template1.3 生命周期影响script setup import { ref, onMounted, onUnmounted } from vue const show ref(false) // 组件 A 的生命周期 onMounted(() console.log(A 挂载)) onUnmounted(() console.log(A 卸载)) /script template !-- show 从 false → true触发 onMounted -- !-- show 从 true → false触发 onUnmounted -- ComponentA v-ifshow / /template二、v-show 显示隐藏2.1 定义v-show通过切换 CSSdisplay属性来控制元素的可见性DOM 节点始终存在。template !-- 条件为 false 时元素仍在 DOM 中只是 display: none -- div v-showshow显示内容/div /template2.2 不支持的场景template !-- ❌ 错误v-show 不能用在 template 上 -- template v-showshow div内容/div /template !-- ❌ 错误v-show 不支持 v-else -- div v-showshow显示/div !-- div v-else隐藏/div 语法错误 -- /template三、核心区别3.1 机制对比对比项v-ifv-show实现方式动态创建/销毁 DOM切换 CSS displayDOM 节点条件为 false 时不存在始终存在初始渲染条件为 false 时无开销始终渲染切换开销高创建/销毁低切换样式生命周期触发创建/销毁钩子不触发任何钩子template支持不支持v-else支持不支持3.2 性能差异// 场景 1条件很少变化// ✅ 推荐 v-if初始渲染开销低条件为 false 时不渲染// ❌ v-show始终渲染浪费// 场景 2频繁切换// ✅ 推荐 v-show切换开销低只切换样式// ❌ v-if每次切换都要创建/销毁 DOM四、应用场景区分4.1 适合 v-if 的场景template !-- 1. 权限控制条件很少变化 -- AdminPanel v-ifisAdmin / UserPanel v-else / !-- 2. 角色判断运行时条件固定 -- div v-ifrole editor编辑器/div div v-else-ifrole viewer查看器/div !-- 3. 条件渲染多个元素 -- template v-ifisLoggedIn UserProfile / UserSettings / /template !-- 4. 懒加载组件首次需要时才创建 -- HeavyComponent v-ifshowHeavy / /template4.2 适合 v-show 的场景template !-- 1. Tab 切换频繁切换 -- div v-showactiveTab tab1Tab 1 内容/div div v-showactiveTab tab2Tab 2 内容/div div v-showactiveTab tab3Tab 3 内容/div !-- 2. 折叠面板频繁展开/收起 -- div classpanel div classheader clickexpanded !expanded标题/div div v-showexpanded classcontent内容/div /div !-- 3. Tooltip / Popover频繁显隐 -- div v-showtooltipVisible classtooltip提示内容/div !-- 4. 加载状态频繁切换 -- div v-showloading classspinner加载中.../div /template五、v-if 与 v-for 优先级5.1 Vue 2 vs Vue 3template !-- Vue 2v-for 优先级更高 -- !-- 先遍历再判断条件 -- li v-foritem in list v-ifitem.active {{ item.name }} /li !-- Vue 3v-if 优先级更高 -- !-- 先判断条件但 item 未定义 -- !-- ❌ 错误写法 -- /template5.2 Vue 3 推荐写法script setup import { ref, computed } from vue const list ref([ { id: 1, name: A, active: true }, { id: 2, name: B, active: false }, { id: 3, name: C, active: true } ]) // ✅ 推荐用 computed 过滤 const activeList computed(() list.value.filter(item item.active)) /script template !-- ✅ 正确直接遍历过滤后的列表 -- li v-foritem in activeList :keyitem.id {{ item.name }} /li !-- ✅ 或者用 template 包裹 -- template v-foritem in list :keyitem.id li v-ifitem.active {{ item.name }} /li /template /template六、SSR 场景6.1 v-show 在 SSR 中的问题template !-- v-show 在服务端渲染时无效 -- !-- 因为服务端无法操作 DOM 的 display 属性 -- !-- 服务端返回的 HTML 始终包含该元素 -- div v-showshow内容/div !-- ✅ SSR 推荐使用 v-if -- !-- 条件为 false 时服务端不会渲染该元素 -- div v-ifshow内容/div /template七、面试聚焦7.1 生命周期差异// v-if切换时触发组件的创建/销毁生命周期// false → true触发 onMounted// true → false触发 onUnmounted// v-show不触发任何生命周期钩子// 始终存在于 DOM 中7.2 初始渲染开销// v-if条件为 false 时初始渲染无开销不创建 DOM// v-show无论条件如何始终渲染 DOM有初始渲染开销// 场景条件默认为 false首次需要时才显示// v-if首次无开销切换时有开销// v-show首次有开销切换时无开销八、易混淆点v-show 不可用在template上template不会渲染为真实 DOM无法设置display属性。v-show 不支持 v-elsev-show 是简单的样式切换不支持分支语法。SSR 场景 v-show 无效服务端无法操作 DOM 的display属性应使用 v-if。Vue 3 的优先级变化v-if 优先级高于 v-forVue 2 中相反这是常见迁移坑点。v-if 有惰性条件为 false 时内部组件不会被创建切换到 true 时才会创建。九、思考与练习1.v-if 和 v-show 的核心区别是什么解析v-if动态创建/销毁 DOM切换开销高初始渲染开销低v-show切换 CSS display切换开销低初始渲染开销高2.什么场景用 v-if什么场景用 v-show解析v-if条件很少变化权限控制、角色判断v-show频繁切换Tab、折叠面板、Tooltip3.v-show 为什么不能用在template上解析template不会渲染为真实 DOM 节点而 v-show 需要通过操作 DOM 的display属性来切换显示所以无法在template上使用。4.Vue 3 中 v-if 和 v-for 一起用会怎样解析Vue 3 中 v-if 优先级高于 v-for会导致 v-if 中无法访问 v-for 的变量。推荐用 computed 先过滤列表或用template包裹。5.v-show 在 SSR 中为什么无效解析SSR 是在服务端生成 HTML服务端无法操作 DOM 的display属性。v-show 始终渲染元素到 HTML 中无法在服务端实现隐藏效果应使用 v-if。总结v-if动态创建/销毁 DOM适合条件很少变化的场景v-show切换 CSS display适合频繁切换的场景v-if 有分支语法v-if / v-else-if / v-elsev-show 不支持template和 v-elsev-if 触发生命周期创建/销毁钩子v-show 不触发生命周期Vue 3 优先级v-if v-forSSR 场景v-show 无效用 v-if