v-if 与 v-show 的区别及使用场景

核心区别

v-if是通过添加或移除DOM元素来控制元素的显示与隐藏。当条件为false时，元素不会存在于DOM中，而条件为true时，元素会被重新创建并插入到DOM中。这意味着v-if在切换时有较高的性能开销，因为每次切换都会触发组件的销毁和重建过程。如果元素初始渲染时条件为false，那么相关的生命周期钩子（如created、mounted）也不会执行。这适合用在不需要频繁切换的场景，比如权限控制或者一次性渲染的模块。

而v-show则是通过CSS的display属性来控制元素的显示与隐藏。无论条件如何，元素始终会被渲染到DOM中，只是简单地切换display属性为none或block等值。因此，v-show在初始渲染时会有更高的开销，因为元素需要被渲染到DOM中，但之后的切换开销较低，适合需要频繁切换显示状态的场景，比如选项卡切换或者模态框的显示与隐藏。

使用场景对比

1. 优先使用 v-if 的场景

• 初始不渲染：当元素初始条件多为 false 时（如权限控制模块）。
• 低频切换：元素切换频率低（如页面初始化时根据配置显示不同布局）。
• 复杂组件：包含子组件或需要触发生命周期的场景（如弹窗内的表单校验）。

敏感操作

2.优先使用 v-show 的场景

• 高频切换：元素需要频繁显示/隐藏（如选项卡切换、折叠面板）。
• 简单元素：不涉及子组件或复杂逻辑的静态元素（如纯文本提示）。

详情内容

性能优化建议

1.避免同时使用 v-if 和 v-for

• Vue 会优先执行 v-for，导致每个循环项都进行条件判断（性能差）。
• 替代方案：在 v-for 外层使用 template 包裹 v-if。

{{ item.name }}

2.结合计算属性优化条件判断

• 复杂条件逻辑优先通过 computed 预处理，减少模板中的计算开销。

<script setup>
const hasPermission = computed(() => {
  return user.role === 'admin' && featureFlag.enabled;
});
</script>
头条是王八蛋

进阶注意事项

• Vue3 中的优化：

• v-if 支持 v-else-if 和 v-else 链式写法。
• 使用 包裹 v-if 组件可缓存状态（如页面级 Tab 切换）。

• 服务端渲染（SSR）：v-show 在 SSR 中会导致隐藏内容仍被渲染到 HTML，需谨慎使用。

总结

合理选择 v-if 和 v-show，可有效提升 Vue 应用的渲染性能与交互体验。