vue3中v-if和v-show有什么区别？如何使用

### Vue2 中 `v-if` 和 `v-show` 的区别 #### 基本概念 `v-if` 和 `v-show` 是 Vue.js 提供的两种用于控制 DOM 元素显示/隐藏的方式。尽管它们都能实现类似的视觉效果，但在底层机制和适用场景上有显著差异。 --- #### 工作原理对比 1. **DOM 存在与否** - `v-if`：当条件为假时，对应的 DOM 节点会被完全移除；当条件重新变为真时，节点会被重新创建并插入到 DOM 中[^2]。 - `v-show`：无论条件真假，目标 DOM 节点始终存在于文档中，仅通过设置 CSS 属性 `display: none` 来控制其可见性[^2]。 2. **编译过程** - `v-if`：由于涉及动态添加或删除 DOM 结构，因此存在局部编译与卸载的过程。具体来说，当条件从假变真时，会触发组件生命周期中的钩子函数（如 `beforeCreate`, `created`, `beforeMount`, `mounted`），而从真变假则会调用销毁阶段的相关方法（如 `beforeDestroy`, `destroyed`）。这使得 `v-if` 更加适合于需要初始化逻辑或依赖注入的情况。 - `v-show`：仅仅是对现有元素应用样式变化的操作，不会引发额外的编译开销，也不会影响关联事件处理器或其他绑定行为的状态保持[^2]。 3. **初始渲染成本** - 对于初次加载页面而言，如果某个部分默认不可见，则采用 `v-if` 可能更高效，因为它避免了无意义的内容生成； - 若该区域一开始就需要呈现出来再迅速隐藏的话，那么利用 `v-show` 将更为合适因为无需经历完整的挂载流程即可快速调整外观状态。 --- #### 性能考量 - 当切换频率较低甚至只发生一次性的展示需求时推荐优先考虑使用 `v-if` ，这样可以减少不必要的内存占用以及提升长期运行效率； - 如果预计会有频繁地开启关闭操作建议选用 `v-show` 方式来处理视图层面上的变化从而降低每次变动所带来的计算负担。 --- ### 示例代码比较 以下是两个指令分别作用下的简单例子： ```html <!-- 使用 v-if --> <template> <div id="app"> <!-- 根据布尔变量决定是否渲染此段落 --> <p v-if="isVisible">This is visible when isVisible is true.</p> </div> </template> <script> export default { data() { return { isVisible: false }; } }; </script> ``` ```html <!-- 使用 v-show --> <template> <div id="app"> <!-- 即使被隐藏也依然保留于HTML结构之中 --> <p v-show="isDisplayed">This stays in the DOM but may be hidden via CSS.</p> </div> </template> <script> export default { data() { return { isDisplayed: false }; } }; </script> ``` --- ### 使用场景总结 | 特性 | `v-if` | `v-show` | |---------------------|-------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------| | 初始渲染 | 推迟至必要时刻才构建实际的 HTML | 立即生成所有潜在可用项 | | 动态切换代价 | 较高(需重复执行 mount/unmount 过程) | 较低(CSS toggle only) | | 数据响应速度 | 慢一点 (因涉及到更多内部管理动作) | 快一些 | | 组件实例化 | 在首次满足条件前不会被执行 | 不管显隐都会完成 | 综上所述，在选择二者之一之前应当仔细权衡项目特定上下文中对于资源利用率及时效性的偏好程度以便做出最佳决策[^2]。 ---