本文通过展示方式、执行顺序、性能等角度，对 v-if、v-show 做对比。
| 对比项 | v-if | v-show |
| 展示方式 | 通过渲染 DOM | 使用 CSS 样式 |
| 表达式 | 支持复杂表达式 | 支持普通表达式 |
| 执行顺序 | 高于 v-show | v-if 决定是否渲染到 DOM，而后 v-show 确定是否显示 |
| 如果 v-if 条件为 false，元素将不会被渲染到 DOM 中，v-show 指令将被忽略。 | ||
| 如果 v-if 条件为 true，元素将被渲染到 DOM 中，然后 v-show 将决定是否显示该元素 | ||
| 性能 | 因涉及 DOM 操作，会有性能开销 | 性能开销小 |
| 使用场景 | 低频变化，如组件加载 | 高频变化，如状态切换 |
参考：
v-show和v-if有什么区别？使用场景分别是什么？
一文讲透 Vue 中 `v-if` 和 `v-show` 的区别