Vue v-show和v-if的区别（附带实例）

条件渲染是 Vue 控制 HTML 页面渲染的方式之一。很多时候，我们都需要通过条件渲染的方式来控制 HTML 元素的显示和隐藏。在 Vue 中，要实现条件渲染，可以使用 v-if 指令，也可以使用 v-show 指令。

v-show 指令的基本用法与 v-if 类似，它也是通过设置条件值的真假来决定元素的渲染情况的。示例代码如下：

<h1 v-show="show">v-show标题在这里</h1>

与 v-if 不同的是，v-show 并不支持 template 模板，同时也不可以和 v-else 结合使用。

虽然 v-if 与 v-show 的用法非常相似，其实它们的渲染逻辑是完全不同的。

从元素本身的存在性来说，v-if 才是真正意义上的条件渲染，其在条件变换的过程中，组件内部的事件监听器都会正常执行，子组件也会正常被销毁或重建。同时，v-if 采取懒加载的方式进行渲染，如果初始条件为假，则关于这个组件的任何渲染工作都不会进行，直到其绑定的条件为真时，才会真正开始渲染此元素。

v-show 指令的渲染逻辑只是一种视觉上的条件渲染，实际上无论 v-show 指令设置的条件是真是假，当前元素都会被渲染，v-show 指令只是简单地通过切换元素 CSS 样式表中的 display 属性来实现展示效果。

我们可以通过 Chrome 浏览器的开发者工具来观察 v-if 与 v-show 指令的渲染逻辑，示例代码如下：

<h1 v-if="show">v-if标题在这里</h1>
<h1 v-show="show">v-show标题在这里</h1>

当条件为假时，可以看到，v-if 指定的元素不会出现在 HTML 文档的 DOM 结构中，而 v-show 指定的元素依然会存在，如下图所示。


由于 v-if 与 v-show 这两种指令的渲染原理不同，通常 v-if 指令有更高的切换性能消耗，而 v-show 指令有更高的初始渲染性能消耗。

在实际开发中，如果组件的渲染条件会比较频繁的切换，则建议使用 v-show 指令来控制，如果组件的渲染条件在初始指定后很少变化，则建议使用 v-if 指令控制。另外，如果组件的每次可见都需要执行完整的生命周期方法，也需要使用 v-if 指令控制。