Vue中 v-if 和 v-show 的区别
v-if 和 v-show 都是 Vue 中用于条件性渲染元素的指令，但它们在实现方式和适用场景上有重要区别：
主要区别
| 特性 | v-if | v-show |
|---|---|---|
| DOM操作 | 条件为假时，元素从DOM中移除 | 始终保留在DOM中，只是切换CSS的display属性 |
| 初始渲染成本 | 更高的初始渲染成本（频繁创建/销毁） | 更高的初始渲染成本（总是渲染） |
| 切换成本 | 更高的切换成本（DOM操作） | 更低的切换成本（仅CSS切换） |
| 编译/生命周期 | 触发组件的创建/销毁生命周期钩子 | 不触发生命周期钩子 |
| 适用场景 | 运行时条件很少改变的情况 | 需要频繁切换显示/隐藏的情况 |
详细说明
1. DOM 操作方式
v-if是"真正的"条件渲染，在切换过程中条件块内的事件监听器和子组件会被销毁和重建。v-show不管初始条件如何，元素总是会被渲染，只是简单地基于CSS进行切换。
2. 性能考虑
v-if有更高的切换开销（适合运行时条件很少改变的情况）v-show有更高的初始渲染开销（适合需要非常频繁切换的情况）
3. 生命周期影响
v-if切换时会触发组件的created和destroyed生命周期钩子v-show不会触发任何生命周期钩子，只是CSS显示/隐藏
使用示例
运行
<template><div><!-- 使用v-if --><div v-if="showElement">使用v-if的内容</div><!-- 使用v-show --><div v-show="showElement">使用v-show的内容</div><button @click="toggle">切换显示</button></div>
</template><script>
export default {data() {return {showElement: true}},methods: {toggle() {this.showElement = !this.showElement}}
}
</script>最佳实践建议
如果元素需要频繁切换显示/隐藏（如选项卡、折叠面板等），使用
v-show如果元素初始条件为假且很少变为真，使用
v-if如果元素包含大量子组件或复杂DOM结构，且需要优化性能，考虑使用
v-show如果需要控制组件生命周期（如需要在隐藏时释放资源），使用
v-if
特殊情况
v-if可以与v-else和v-else-if配合使用v-show不能与这些指令配合使用v-if支持<template>标签作为不可见包装元素，而v-show不支持