在 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 的情况。