Vue2中v-if和v-show有什么区别？

在 Vue 2 中，`v-if` 和 `v-show` 是两个用于条件渲染的指令，它们有一些区别和适用场景。

1. `v-if`：
   `v-if` 是一种条件渲染指令，根据表达式的值来决定是否渲染元素。当表达式为真时，元素会被渲染到 DOM 中；当表达式为假时，元素不会被渲染并从 DOM 中移除。

   `v-if` 是惰性的，即元素的渲染和销毁是根据条件动态进行的。当条件变为真时，元素被创建和插入到 DOM 中；当条件变为假时，元素从 DOM 中移除并销毁。

   示例：

<template>
     <div>
       <p v-if="show">This is rendered by v-if</p>
     </div>
</template>

   在上述示例中，当 `show` 的值为真时，`<p>` 元素会被渲染到 DOM 中，否则不会被渲染。

2. `v-show`：
   `v-show` 也是一种条件渲染指令，与 `v-if` 类似，根据表达式的值来决定元素是否显示。当表达式为真时，元素会显示；当表达式为假时，元素会隐藏，但仍然保留在 DOM 中。

   `v-show` 不会像 `v-if` 那样销毁和重新创建元素，而是通过修改元素的 CSS 样式来控制元素的显示与隐藏。

   示例：

 <template>
     <div>
       <p v-show="show">This is shown by v-show</p>
     </div>
 </template>

   在上述示例中，当 `show` 的值为真时，`<p>` 元素会显示；当 `show` 的值为假时，`<p>` 元素会隐藏，但仍然保留在 DOM 中。

区别总结：

• `v-if` 是惰性的，根据条件动态渲染和销毁元素，适用于在条件较少变化的情况下使用。
• `v-show` 是通过修改元素的 CSS 样式来控制显示与隐藏，适用于频繁切换显示状态的情况。
• `v-if` 在切换时有更高的初始渲染开销，而 `v-show` 在初始渲染时有更高的初始渲染开销。
• 如果需要在运行时频繁切换元素的可见性，`v-show` 通常比 `v-if` 性能更好。
• 如果条件很少改变，或者有很多初始渲染开销较大的元素，`v-if` 可能更合适。