1、v-show
实现方式：
无论条件真假，v-show在首次渲染时都会编译对应元素并添加到 DOM 中。
之后通过修改display: none;样式来控制显示与隐藏。特点：
初始渲染时会加载元素，因此初始渲染开销较高。
切换显隐仅涉及 CSS 样式修改，性能消耗极小，非常适合频繁切换的场景。
DOM 节点始终存在，只是不可见。
2、v-if
实现方式：
通过动态向 DOM 树添加或删除元素来实现显隐：如果条件为
false，首次渲染时不会生成对应 DOM 元素。当条件变为
true时，会进行局部编译并将元素插入到 DOM 中。当条件由
true变为false时，会删除对应 DOM 节点。
特点：
切换时需要进行 DOM 的增删操作，切换开销较大。
首次渲染时，如果条件不成立，不会有无用的 DOM 元素。
适用于条件不经常变化的场景。
3、对比表
| 特性 | v-if | v-show |
|---|---|---|
| 首次渲染 | 条件不成立则不渲染 | 无论条件真假都渲染 |
| 显隐切换方式 | 动态添加 / 删除 DOM 节点 | 切换 display: none 样式 |
| 切换性能消耗 | 高（DOM 操作） | 低（样式切换） |
| 初始渲染消耗 | 低（按需渲染） | 高（一次性渲染全部） |
| 适用场景 | 条件不常变化 | 需要频繁切换显隐 |
| DOM 节点存在性 | 条件为假时不存在 | 始终存在 |