[Vue.js] v-if 和 v-show 的区别以及如何使用它们

（本文已使用 Vue.js v2.5.13 进行测试。）

我想写一下 Vue.js 条件渲染指令 v-if 和 v-show 的一般区别以及如何使用它们。

在官方文档中不太理解 v-if 和 v-show 之间区别的人

 

v-if 和 v-show 的区别

试试看

为了演示这一点，我们创建了一个 JSFiddle。

另外，请准备好开发者工具（在 Chrome、Firefox 或 Edge 浏览器中按 F12 键即可打开）。

简单解释一下这个例子，其中有两个组件 A 和 B，它们的模板都只有一个 p 标签，

我们尝试分别使用 v-if 和 v-show 指令来切换可见性。

根对象的数据包含两个布尔变量 toggleA 和 toggleB，分别指示元素是显示还是隐藏。
组件 A 使用 v-if 指令嵌入（v-if="toggleA")
组件 B 使用 v-show 指令嵌入（v-show="toggleB")，组件 B）。

对于 toggleA 和 toggleB，单击相应的按钮 A 或 B 将反转真值。

现在，打开页面后，您应该只看到用于切换布尔值的按钮 A 和 B。
然而，在 DOM 树中，v-if 和 v-show 的区别在页面打开时就已经很明显了。
组件 A 的 DOM 不存在，而组件 B 的 DOM 存在，但应用了 display:none 样式。

官方文件是这样写的：

`v-if` 是延迟渲染。如果初始显示时为假，则不执行任何操作。条件代码块只有在条件变为真时才会渲染。
而 `v-show` 则非常简单。无论初始条件如何，元素始终都会渲染，并且存储为一个简单的基于 CSS 的切换开关。

这就是它的含义。

 

再进一步

现在让我们看看当我们反复反转 v-if 和 v-show 的布尔值时会发生什么。
重新加载页面（或在 JsFiddle 菜单中按“运行”），然后检查开发者工具控制台。

你会注意到，组件 B (v-show) 创建的钩子会在页面打开时立即执行。
即使你反复点击按钮 B，导致 v-show 的值从 false 变为 true，再变为 false 再变为 true，创建的钩子也只会执行一次，因为只有样式发生了变化。

反之，你会注意到，反复按下 A 按钮会多次执行 A 组件创建的钩子函数 (v-if)。
当 v-if 从 true 变为 false 时，DOM 会消失；当它再次变为 true 并重新出现时，数据也会被初始化。

 

不同用途

，当需要频繁切换显示和隐藏元素
，或者需要在元素隐藏时保留数据时，应该使用 `v-show`。而当不需要频繁切换显示和隐藏元素，或者不需要在元素隐藏时保留数据时，则应该使用 `v-if`。

v-else 指令只能与 v-if 一起使用，但仅仅因为你想使用 v-else 就使用 v-if 并不是一个好主意。