Vue2之 v-if VS v-show

Vue2 中的 v-if 和 v-show 都是用来实现条件性渲染的指令，用于控制元素显示与隐藏的指令，但它们在实现机制和使用场景上有所不同：

一、实现机制：

1.1、v-if 

• 当条件表达式为真时，Vue.js 会根据条件动态地创建或销毁对应的 DOM 元素。
• 当条件为假时，Vue.js 会销毁对应的 DOM 元素，并且从 DOM 中移除。
• 每次条件改变时，Vue.js 都会重新进行 DOM 的创建或销毁，这可能会导致性能开销较高，尤其是在频繁切换的情况下。

1.2、v-show 

• 当条件表达式为真时，Vue.js 会简单地切换元素的 CSS 样式，将其显示出来。
• 当条件为假时，Vue.js 会将元素的 CSS 样式设置为 display: none;，将其隐藏起来。
• 元素始终存在于 DOM 中，只是其可见性发生了改变，因此切换的开销较小。
• 由于并不涉及 DOM 的创建或销毁，所以即使在频繁切换的情况下，性能表现也较好。

二、性能影响：

2.1、v-if 

• 当条件表达式在变化时，v-if 会动态地创建或销毁 DOM 元素。这意味着在条件变化时，会有额外的 DOM 操作和重建的开销。
• 如果条件变化不频繁，这种额外的开销可能是可以接受的，但是如果条件变化频繁，v-if 可能会导致性能下降，因为频繁的 DOM 操作会引起页面的重排和重绘。

2.2、v-show 

• v-show 只是简单地切换元素的 CSS 样式，不会涉及到 DOM 的创建或销毁。因此，即使条件频繁变化，性能影响也比较小。
• 由于元素始终存在于 DOM 中，所以不会引起页面的重排和重绘，这有助于提高页面的性能和流畅度。

三、使用场景：

3.1、v-if 

• 条件变化较少或者条件切换开销不是很大的情况下。
• 需要完全销毁和重新创建 DOM 元素的情况，例如在需要对大型组件进行条件渲染时。
• 当元素的渲染与销毁对页面性能影响不大或者可以接受时。

3.2、v-show 

• 需要频繁切换显示状态的情况，例如在响应用户交互或者动画效果时。
• 希望减少 DOM 操作和页面重排、重绘对性能的影响。
• 当元素的存在与否对页面布局不产生影响，仅影响元素的显示状态时。