vue中v-if与v-show的区别

在 Vue.js 中，v-if 和 v-show 都是用来控制元素显示与隐藏的指令，但它们之间有几个关键的区别：

直接上图

一. 条件渲染方式不同

v-if：

• 真正的条件渲染：v-if 指令会根据表达式的真假来销毁或重新创建 DOM 元素及其内部的 Vue 组件。
• 当条件为 false 时，元素及其内部的 Vue 组件会被完全销毁（通俗的讲就是将该标签直接删除，这样不是就不会出现在页面上了，简单粗暴），并且在 DOM 中不存在。
• 适合在运行时很少改变条件，或者条件改变时希望销毁和重建 DOM 的情况。

v-show：

• 简单的 CSS 显示/隐藏：v-show 指令只是简单地切换 CSS 的 display 属性，通过设置元素的 display 样式来控制元素的显示与隐藏。
• 当条件为 false 时，元素在 DOM 中仍然存在，只是通过 CSS 控制不显示（即将display设置为none）。
• 适合在需要频繁切换显示状态的情况下，因为不会销毁和重建 DOM，只是简单地切换 CSS 属性。

二. 性能比较

v-if 的性能影响：