v-show 和 v-if 是 Vue.js 中两个非常重要的指令，都用于条件性地显示或隐藏元素，但它们的实现方式和适用场景有本质区别。

简单来说，最核心的区别是：

下面从多个维度进行详细的对比。

特性	`v-if`	`v-show`
实现机制	动态添加/移除 DOM 元素	切换 CSS 的 `display: none` 属性
初始渲染成本	高（如果初始为 false，则什么都不做，直到第一次为 true 时才渲染）	高（无论初始条件如何，元素都会被编译并渲染，只是通过 CSS 隐藏）
切换开销	高（销毁和重建组件/元素、触发生命周期钩子）	低（只是切换 CSS 属性，非常高效）
生命周期	会触发组件的 `created`, `mounted`, `destroyed` 等生命周期钩子	不会触发任何生命周期钩子（因为组件始终存在，只是被隐藏）
编译/惰性	惰性的：如果初始条件为假，则不会编译或渲染，直到条件第一次变为真。	非惰性的：无论初始条件如何，元素都会被编译并保留在 DOM 中。
用法	任何条件渲染	适用于需要非常频繁切换的场景
不适合场景	需要非常频繁切换的场景（因为切换开销大）	不适合初始条件为假且永远不需要显示的情况（因为仍然会渲染）
与 `v-else` 配合	支持	不支持
与 `<template>` 配合	支持（可以包裹多个元素）	不支持

v-if：
当条件为 false 时，对应的元素或组件完全不会出现在 DOM 中。当条件变为 true 时，Vue 会开始编译并渲染它们，并将其插入到 DOM 中。

<div v-if="isVisible">使用 v-if 控制</div>

v-show：
无论条件为何，元素始终会被编译并保留在 DOM 中。它只是通过内联的 CSS 样式 display: none 来切换显示和隐藏。

<div v-show="isVisible">使用 v-show 控制</div>

当 isVisible 为 false 时，检查元素结构，你会发现这个 <div> 仍然在 DOM 中，但它有内联样式 style="display: none;"。
当 isVisible 为 true 时，内联样式会被移除，变为 style=""，元素正常显示。

由于 v-if 会真正地销毁和重建元素及其子组件，因此它会触发完整的生命周期钩子。

<ChildComponent v-if="isVisible" />

当 isVisible 从 true 变为 false 时，ChildComponent 会被销毁，触发 beforeDestroy 和 destroyed 钩子。
当 isVisible 从 false 变为 true 时，ChildComponent 会重新创建，触发 beforeCreate, created, beforeMount, mounted 等钩子。

而对于 v-show，由于组件始终存在于 DOM 中，只是被隐藏，所以无论怎么切换，它的生命周期钩子都只会在初始渲染时触发一次。

选择使用哪个指令，主要取决于你需要的切换频率。

需要频繁切换时（如：切换标签页、显示/隐藏过滤器、toggle 开关），使用 v-show。
- 原因：它的切换成本极低，仅仅是修改 CSS，避免了频繁销毁和重建组件带来的性能开销。
运行时条件很少改变，或者初始条件很可能为 false 时，使用 v-if。
- 原因：它具有惰性，如果初始不为真，可以避免不必要的编译和渲染成本，从而加快初始页面加载速度。

记住这个简单的原则：

v-if 就像是 “彻底销毁”。不用的时候直接拆掉，用的时候再重新盖。适合变化不频繁、条件判断复杂（常与 v-else-if 连用）或者对初始加载性能有要求的场景。
v-show 就像是 “拉上窗帘”。东西还在屋里，只是你看不见。适合需要非常频繁切换显示状态的场景。

简单决策流程图：