Vue学习v-show与v-if区别

---

一、前言

当你在 Vue.js 中需要根据条件来控制元素的显示与隐藏时，你可能会遇到 v-show 和 v-if 这两个指令。它们看起来很相似，但在实际应用中有一些关键区别。

1、v-show

• 用法：v-show 是一个指令，它接受一个表达式作为参数。当这个表达式的值为真时，元素会被显示，否则会被隐藏。
• 渲染：无论条件是否为真，v-show 元素总是被渲染在 DOM 中，只是通过 CSS 控制其显示或隐藏。
• 性能：当需要频繁切换显示/隐藏状态时，v-show 的性能优于 v-if，因为元素始终存在于 DOM 中，不需要重新创建或销毁。
• 适用场景：适用于需要频繁切换显示状态的情况，例如标签页之间的切换或者动态显示/隐藏菜单。

2、v-if

• 用法：v-if 同样是一个指令，它也接受一个表达式作为参数。当这个表达式的值为真时，元素会被渲染到 DOM 中，否则会从 DOM 中移除。
• 渲染：v-if 控制的元素在条件为假时不会渲染到 DOM 中，只有在条件为真时才会被创建并插入到 DOM 中。
• 性能：当条件不满足时，v-if 控制的元素会从 DOM 中移除，这可能会带来更好的性能，特别是在初始渲染时。
• 适用场景：适用于在条件变化不频繁、需要完全销毁和重新创建元素时，例如表单中的条件显示或者路由切换时。

3、总结

• 使用 v-show 控制的元素始终存在于 DOM 中，只是通过 CSS 控制显示或隐藏，适合频繁切换显示状态的情况。
• 使用 v-if 控制的元素在条件不满足时会从 DOM 中移除，适合在条件变化不频繁、需要完全销毁和重新创建元素的情况。