v-if与v-show切换

### Vue.js 中 v-show 与 v-if 的区别及使用场景 #### 1. **定义与基本行为** `v-show` 和 `v-if` 都是用来控制 DOM 元素的显示与隐藏，但两者的实现方式完全不同。`v-show` 是通过修改 CSS 属性 `display` 来控制元素的可见性[^3]，而 `v-if` 则是根据条件动态地创建或销毁 DOM 元素[^1]。 #### 2. **性能表现** - **`v-show`**：无论初始条件是什么，DOM 元素始终会被渲染出来，并且只是简单地调整其 `display` 样式属性。因此，当需要频繁切换显示状态时，`v-show` 更加高效[^2]。 - **`v-if`**：只有在条件成立时才会渲染对应的模板内容到真实 DOM 上。如果条件为假，则该部分完全不存在于 DOM 结构中。这意味着首次渲染可能会稍微慢一些，但对于那些很少甚至只会出现一次的组件而言，这种方式能够节省内存开销[^1]。 #### 3. **初始化阶段的表现** - 使用 `v-if` 渲染出来的节点，在第一次满足条件之前是不会存在于虚拟 DOM 树中的；相反地，即使一开始就被设置成不可见(`false`) ，采用 `v-show` 方式的节点依旧会出现在最终生成的真实 HTML 文档里面。 #### 4. **适用场景** - 如果某些 UI 组件的状态经常发生变化（即频繁地从可见变为不可见），那么应该选择使用 `v-show` 指令来提高效率[^2]。 - 对于那种只会偶尔出现或者消失不见的情况——比如模态框、错误提示信息等——则更适合运用 `v-if` 进行按需加载[^1]。 #### 5. **注意事项** - 不建议在同一时间点既用到了循环又涉及到条件判断语句（如同时用了 `v-for` 和 `v-if`），因为这可能导致难以预测的行为以及潜在的性能瓶颈问题[^2]。 - 当利用 `ref` 或者原生 JavaScript 方法去查找特定 DOM 节点的时候，请记住只有经过了 `v-if` 处理后的实例才有可能返回 null 值，而对于已经应用过 `v-show` 的情况来说总是可以获得对应对象引用。 ```vue <template> <div> <!-- 使用 v-if --> <p v-if="isVisible">This is visible with v-if.</p> <!-- 使用 v-show --> <p v-show="isShown">This is shown/hidden via v-show.</p> </div> </template> <script> export default { data() { return { isVisible: true, isShown: false, }; }, }; </script> ``` --- ### 总结 综上所述，虽然 `v-show` 和 `v-if` 在表面上看起来非常相似，但实际上它们背后的工作机制大相径庭。合理选用这两个指令取决于具体的应用需求以及预期的操作频率等因素。牢记各自的特点可以帮助我们写出更加优化和易于维护的代码[^1][^2]. ---