在 Vue.js 中，v-if 和 v-show 都是用来控制元素显示与隐藏的指令，但它们之间有几个关键的区别：
直接上图
一. 条件渲染方式不同
v-if：
- 真正的条件渲染：v-if 指令会根据表达式的真假来销毁或重新创建 DOM 元素及其内部的 Vue 组件。
- 当条件为 false 时，元素及其内部的 Vue 组件会被完全销毁（
通俗的讲就是将该标签直接删除，这样不是就不会出现在页面上了，简单粗暴），并且在 DOM 中不存在。 - 适合在运行时很少改变条件，或者条件改变时希望销毁和重建 DOM 的情况。
v-show：
- 简单的 CSS 显示/隐藏：v-show 指令只是简单地切换 CSS 的 display 属性，通过设置元素的 display 样式来控制元素的显示与隐藏。
- 当条件为 false 时，元素在 DOM 中仍然存在，只是通过 CSS 控制不显示（
即将display设置为none）。 - 适合在需要频繁切换显示状态的情况下，因为不会销毁和重建 DOM，只是简单地切换 CSS 属性。
二. 性能比较
v-if 的性能影响：
- 当条件切换时，会销毁和重建 DOM，可能会带来较大的性能开销，特别是在条件频繁变化时。
v-show 的性能影响：
- 不会销毁和重建 DOM，只是通过 CSS 控制显示与隐藏，因此在频繁切换显示状态时性能较好。
三. 使用场景选择
选择 v-if 的情况：
- 需要在运行时条件不经常改变时，可以选择 v-if，因为它可以节省 DOM 开销。
- 当有条件切换时，不希望元素在 DOM 中存在时，可以选择 v-if。
- 权限控制：
举例：
- 管理员页面中的一些操作按钮只有管理员登录时才显示。
<button v-if="user.isAdmin">Delete User</button>
- 某个路由页面需要加载大量数据，可以根据路由条件决定是否渲染该组件。
<router-view v-if="shouldRenderComponent"></router-view>
- 在需要延迟加载的场景中，可以使用 v-if 控制组件的加载时机，避免页面初次加载时加载过多的资源。
<LazyLoadedComponent v-if="shouldLoadLazyComponent"></LazyLoadedComponent>
选择 v-show 的情况：
- 需要频繁切换元素的显示与隐藏状态时，可以选择 v-show，因为它不会带来销毁和重建 DOM 的开销。
- 当元素初始化时应该被显示，但可能在后续操作中被隐藏或显示时，可以选择 v-show。
交互元素的显示/隐藏：
举例：
- 当需要通过用户的操作频繁切换元素的显示状态时，点击按钮显示或隐藏某个菜单或下拉框。
<div v-show="isMenuOpen" class="menu"><!-- menu content -->
</div>
-
根据某些表单字段的状态来显示或隐藏额外的表单输入项，当用户选择某个选项时，显示相关的输入框。
-
根据某些条件来显示或隐藏一些提示性文字或图标，表单输入是否符合要求时显示不同的提示信息。
综上所述，v-if 适合在运行时条件不经常改变或需要销毁和重建 DOM 的情况，而 v-show 则适合在需要频繁切换显示状态而不希望销毁 DOM 的情况。