v-if与v-show区别解析

v-if 和 v-show 的主要区别在于实现机制和适用场景。1. v-if 是条件渲染，根据表达式真假决定是否创建或销毁元素，元素可能不会出现在 DOM 中；2. v-show 则通过切换 CSS 的 display 属性控制显示，元素始终存在于 DOM 中。性能上，v-if 适合运行时很少改变的条件，而 v-show 适合频繁切换的场景。3. 使用场景方面，v-if 适用于页面生命周期中极少切换的内容，如用户登录状态判断；v-show 更适合频繁打开关闭的组件，如弹窗。4. 另外，v-if 可与 <template> 配合包裹多个元素，而 v-show 必须作用于单个元素，需包裹容器才能控制多个元素。理解这些区别有助于避免性能浪费和渲染错误。

v-if 和 v-show 都是 Vue 中用来控制元素显示隐藏的指令，但它们在实现机制和适用场景上差别挺大的。

实现方式不同

v-if 是“真正”的条件渲染。

它会根据表达式的真假决定是否创建或销毁元素。如果条件为假，元素压根不会出现在 DOM 里。等条件变为真时，才会重新创建该元素。

而 v-show 只是切换 CSS 的 display 属性。不管条件是真是假，元素始终会被渲染到 DOM 中，只是通过 display: none 来控制是否显示。

举个例子：

<div v-if="false">这个 div 不会在 DOM 中</div>
<div v-show="false">这个 div 会以 display:none 存在</div>

所以从性能角度看，v-if 有更高的切换开销，适合运行时很少改变条件的场景；v-show 切换开销小，适合频繁切换显示状态的情况。

使用场景建议

适合用 v-if 的情况：

• 元素在页面生命周期中只出现一次或极少切换。
• 页面加载时不需要立刻显示，而且后续可能也不会显示的内容。
• 比如首次加载时判断用户登录状态，展示不同的内容块。

适合用 v-show 的情况：

• 需要频繁切换显示/隐藏的状态。
• 组件初始化成本较高，重复创建会影响性能。
• 比如一个弹窗组件，经常被打开关闭。

如果你不确定选哪个，可以记住一句话：“不常变的用 v-if，经常变的用 v-show。”

与 <template> 的配合使用

还有一个细节容易忽略的是，v-if 可以和 <template> 标签一起使用，来包裹多个元素。

比如：

<template v-if="showSection">
  <h2>标题</h2>
  <p>内容段落</p>
</template>

而 v-show 就不能这样用了，因为它只能作用在单个元素上。如果你想让多个元素一起切换显示，就得给每个都加 v-show，或者在外层套一个容器。

基本上就这些区别了。理解清楚这两个指令背后的机制，就能避免不必要的性能浪费或者渲染错误。