标准答案
- v-if 是条件渲染。条件为 false 时，对应节点和组件不会渲染；条件从 true 变成 false 时，组件会卸载，内部状态和副作用也会被清理。
- v-show 是显示隐藏。节点始终渲染在 DOM 中，只是通过 display: none 控制不可见。
- 初始成本上，v-if 在条件为 false 时成本更低；切换成本上，v-show 更低，因为不需要反复创建和销毁。
- 频繁切换的弹层、标签内容、展开收起，可以优先考虑 v-show。权限控制、懒加载重组件、条件不满足就不应存在的 DOM，优先用 v-if。
- 如果内容涉及敏感操作或权限边界，不要只靠 v-show 隐藏。v-show 的 DOM 仍然存在，不能作为安全控制。
题目解析
v-if 更像“是否存在”，v-show 更像“是否可见”。这句话能覆盖大多数选择场景。
v-if 会触发组件挂载和卸载，适合需要释放资源或重新初始化的组件。v-show 保留组件实例，适合保留输入状态和减少频繁切换成本。
权限场景要分清 UI 隐藏和真正授权。前端隐藏按钮只是体验控制，接口权限仍然必须由服务端校验。
代码示例
这个例子里，登录后才出现的管理入口用 v-if，频繁打开的筛选面板可以用 v-show。
Vue
<template>
<AdminPanel v-if="user.role === 'admin'" />
<button type="button" @click="filterVisible = !filterVisible">
筛选
</button>
<FilterPanel v-show="filterVisible" />
</template>常见误区
- 认为 v-show 更安全，因为用户看不见。实际上 DOM 仍然存在。
- 频繁切换的大组件使用 v-if，导致反复挂载卸载造成卡顿。
- 需要释放定时器、监听器或重置状态的组件使用 v-show，结果副作用一直保留。