Vue中v-if和v-show有什么本质区别？

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

`v-if` 和 `v-show` 的区别是 Vue.js 前端面试中常见的知识点。简单来说：

- `v-if` 是条件渲染，当条件为假时，元素会被完全从 DOM 中移除。- `v-show` 是条件显示，当条件为假时，元素仍保留在 DOM 中，只是通过 CSS 的 `display` 属性来控制显示或隐藏。

具体展示方式：

- 使用 `v-if` 时，元素根据条件有或没有，因此不会有额外的性能开销。- 使用 `v-show` 时，元素始终在 DOM 中，只是通过 CSS 控制显示状态，可能会有微小的性能影响。

区别点：

- `v-if` 在切换时开销较大，因为元素需要被重新渲染。- `v-show` 切换时只需要改变 CSS，性能较好。

首先，我们可以通过以下示例来直观地看到它们的效果：

这是 这是

当 `showTitle` 为 `true` 时，两种情况下都会显示。当 `showTitle` 为 `false` 时：

- 使用 `v-if` 的元素会被从 DOM 中移除。- 使用 `v-show` 的元素依然在 DOM 中，只是不显示。

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