Vue中v-if与v-show有何本质区别？

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

`v-if` 和 `v-show` 的区别是 Vue.js 前端面试中常见的知识点。v-if 是用于条件性地在模板中渲染一块内容，`v-show` 是用来切换元素的 CSS display 属性。

- 使用 `v-if` 时，元素条件性地在 DOM 中渲染和销毁。当条件为假时，元素和元素的事件监听器、子组件都会一起被销毁，因此适用于切换操作不频繁的场景。

- 使用 `v-show` 时，元素始终被渲染并保留在 DOM 中，只是简单地切换 CSS 属性来控制元素的显示与隐藏。适用于切换操作频繁的场景。

举个例子来说明：

这是一个显示的条件内容这是一个隐藏的条件内容

当 `isShow` 为真时，第一个 `div` 将被显示，第二个 `div` 将不会被渲染。反之，第一个 `div` 将不会渲染，第二个 `div` 将显示。

总结来说，`v-if` 和 `v-show` 的主要区别在于其实现原理不同，适用于不同场景。

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