Vue中v-if和v-show究竟有何本质区别，导致它们在条件渲染时各有千秋？

本文共计1135个文字，预计阅读时间需要5分钟。

v-if和v-show是Vue框架中用于条件渲染的指令。v-if是根据条件判断是否渲染元素，而v-show则控制元素的显示和隐藏。

- v-if：当条件为假时，元素会被完全从DOM中移除。当条件变为真时，元素会被渲染并插入到DOM中。因为涉及到DOM操作，所以当条件频繁变化时，使用v-if可能会造成性能问题。

- v-show：不管条件真假，元素始终存在于DOM中。当条件为假时，元素通过CSS的display属性设置为`none`来隐藏，当条件为真时，显示元素。

具体展示如下：

当条件为真时显示这段文字

当条件为真时显示这段文字

区别：

- v-if是真正的条件渲染，因为它确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。- v-show只是简单地切换元素的CSS属性。

选择使用哪个取决于你的具体需求。如果条件很少改变，且需要更快的渲染性能，可以使用v-if。如果需要频繁切换，但希望保持DOM结构不变，则使用v-show更合适。

v-if和v-show的区别是前端面试中常问的基础知识点，v-if、v-show顾名思义就是用来判断视图层展示效果的。