v-show 和 v-if 指令有什么区别？

v-show和v-if都是Vue.js框架中用于条件渲染元素的指令，但是它们的工作方式和适用场景有所不同。

v-if

v-if指令用于根据表达式的真值来条件性地渲染元素。如果表达式为真，元素会被渲染；如果为假，元素不会被渲染。重要的是要注意，使用v-if时，如果条件为假，元素及其子元素会被完全销毁并从DOM中移除。

例子：

html
<div v-if="isVisible">
  这里的内容只有在`isVisible`为true时才会显示。
</div>

在这个例子中，只有当isVisible为真时，<div>元素才会出现在DOM中。如果isVisible变为假，这个<div>及其内容会从DOM中完全移除。

v-show

v-show指令也是根据表达式的真值来显示或隐藏元素，但它的工作方式有所不同。无论表达式的值如何，元素都会被渲染到DOM中，只是通过CSS的display属性来控制元素的显示或隐藏。

例子：

html
<div v-show="isVisible">
  这里的内容通过CSS控制显示或隐藏。
</div>

在这个例子中，<div>元素始终存在于DOM中，但它的显示与否依赖于isVisible的值。如果isVisible为假，元素不会从DOM中移除，而是使用display: none;样式被隐藏。

使用场景

• v-if 更适合用于条件不经常改变的情况，因为它涉及到更高的初始渲染成本（元素的添加和销毁）。
• v-show 更适合用于频繁切换显示状态的情况，因为元素始终被加载，只是简单地切换显示状态。

总结来说，v-if和v-show虽然都可用于条件渲染，但v-if有更高的切换成本而v-show有更高的初始渲染成本。根据具体的使用场景和性能需求来选择使用哪一个是非常重要的。