v-if与v-show的区别
| 对比维度 | v-if | v-show |
|---|---|---|
| 渲染机制 | 条件为真时创建DOM,为假时销毁DOM | 始终渲染DOM,通过 display:none 切换 |
| 切换成本 | 高(涉及销毁/重建) | 低(仅切换CSS) |
| 初始渲染成本 | 惰性(假时不渲染) | 较高(无论真假都渲染) |
| 是否支持 v-else | ✅ 支持 | ❌ 不支持 |
| 组件状态保留 | 切换会重置组件状态 | 切换会保留组件状态 |
| 适用场景 | 权限控制、不常变的页面切换 | Tab切换、下拉菜单、高频显示切换 |
| 对比维度 | v-if | v-show |
|---|---|---|
| 渲染机制 | 条件为真时创建DOM,为假时销毁DOM | 始终渲染DOM,通过 display:none 切换 |
| 切换成本 | 高(涉及销毁/重建) | 低(仅切换CSS) |
| 初始渲染成本 | 惰性(假时不渲染) | 较高(无论真假都渲染) |
| 是否支持 v-else | ✅ 支持 | ❌ 不支持 |
| 组件状态保留 | 切换会重置组件状态 | 切换会保留组件状态 |
| 适用场景 | 权限控制、不常变的页面切换 | Tab切换、下拉菜单、高频显示切换 |