【vue】v-if v-show的区别

我们知道，v-if与v-show都可以做到使标签模块消失的功能，不过二者的消失方法却是不一样，这篇文章就来总结探讨一下，v-if与v-show的区别。

一，v-show与v-if含义

v-show 指令* 是 ‌Vue.js 中用于根据条件控制元素显示与隐藏的指令。它通过修改元素的 style.display 属性来控制元素的显示（display: block）或隐藏（display: none）。即使元素被隐藏，它仍然会被渲染在 ‌DOM 中，只是不会在页面上显示

v-if是基于条件进行的“惰性渲染”，即只有在条件为真时才会渲染对应的组件或元素，而在条件为假时会直接移除对应的组件或元素。这意味着在条件为假时，相关的组件或元素的所有事件监听器和子组件都会被销毁，从而减少了内存的占用。

简单来说就是：v-show通过修改标签所在的属性的display去进行标签的显示和隐藏，没有销毁的过程，v-if有销毁的过程，对标签是直接的销毁创建。

二，使用性能，性能性价比

• ‌v-if‌：初始化渲染和更新成本较高，但一旦条件渲染确定，就不会再对 DOM 进行操作，适合条件不经常改变的场景。‌23
• ‌v-show‌：初始渲染可能较快，但每次视图更新时都会重新渲染 DOM，适合频繁切换的场景。

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。v-show 在进行切换时，会对标签的 display 属性进行切换,通过 display 不显示来隐藏元素。 一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

 v-if使用场景条件

• 当元素需要根据条件来决定是否渲染，且这部分内容不需要频繁切换时。‌12
• 当操作涉及到大型列表或复杂组件，并且经常需要条件渲染时。‌4

 v-show使用场景条件

• 当元素需要频繁地改变显示状态时，如点击按钮控制某块区域的显示隐藏。‌12
• 当元素虽然不常显示，但希望保持其在 DOM 中的位置以便快速切换时。‌3

综上所述，v-if 和 v-show 在 Vue.js 中各有适用场景，选择时应根据具体需求和性能考虑来决定使用哪一个。