[Vue.js] v-if 和 v-show 的区别，如何正确使用它们的要点

（本文中，使用Vue.js v2.5.13确认操作。）

我想写一下 Vue.js 条件渲染指令 v-if 和 v-show 的一般差异和用法。

官方文档 v-if vs 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")。

对于toggleA和toggleB来说，当点击相应的按钮A或B时，真值就会反转。

现在，当你打开页面时，我认为只显示了用于在 true 和 false 值之间切换的 A 和 B 按钮。
但是在DOM树上，v-if和v-show的区别在页面打开的时候就已经可见，
组件A的DOM不存在，但是组件B的DOM应用了display:none样式。它存在于这样一种状态：

官方文档是这么说的：

v-if 是惰性绘图。 如果初始显示为 false，则不会执行任何操作。在条件首次变为真之前，不会绘制条件块。
另一方面，v-show则非常简单。无论初始条件如何，元素始终都会被绘制，并保存为简单的基于 CSS 的切换。

就是这个意思。

 

让我们更深入一点

从这里，我们将看到当我们反复反转 v-if 和 v-show 的真值时会发生什么。
重新加载页面一次（或按 JsFiddle 菜单上的 RUN）并查看开发人员工具控制台。

可以看到打开页面时执行了组件B（v-show）创建的hook。
即使反复按 B 按钮，v-show 反复从 false -> true -> false -> true 变化，创建的 hook 也只会执行一次，因为样式只改变。

另一方面，如果反复按下A按钮，您将看到A组件（v-if）创建的钩子将被执行多次。
当 v-if 从 true 切换到 false 时，DOM 消失，当切换到 true 重新出现时，数据也已经初始化。

 

正确使用

如果您经常在显示/隐藏之间切换或即使在隐藏时也需要保留数据，请使用 v-show；
如果您不经常切换或在隐藏时不需要保留数据，则最好使用 if 作为您的基本策略。

v-else 指令只能在使用 v-if 时使用，但仅仅因为要使用 v-else 就使用 v-if 并不是一个好主意。