[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，分别指示组件是可见还是隐藏。v
-if 指令（v-if="toggleA") 被添加到嵌入式组件 A
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 的 hook（v-show）会在页面打开时执行。
即使你反复点击 B 按钮，v-show 的值从 false 变为 true，再从 false 变为 true，这个 hook 也只会执行一次，因为样式只发生了变化。

另一方面，如果您反复按下 A 按钮，您会发现 A 组件创建的钩子（v-if）被执行了多次。
当 v-if 从 true 变为 false 时，DOM 消失；当它再次变为 true 并重新出现时，数据也会被初始化。

 

不同用途

，如果经常需要切换可见性或即使隐藏也需要保留数据，则应使用 v-show；
如果不经常切换可见性或隐藏时不需要保留数据，则应使用 v-if。

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