Vue条件渲染 | v-if和v-show

👨‍🎨Vue条件渲染 | v-if vs. v-show

💡Vue官方文档辨析

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

💡详细and通俗理解

• v-show 控制的是元素的 CSS（display）；v-if 是控制元素本身的添加或删除。
• v-show 切换的时候不会触发组件的生命周期。 v-if 由 false 变为 true 会触发组件的beforeCreate、create、beforeMount、mounted 钩子（跟组件的初始化执行的钩子一致），由 true 变为 false 会触发组件的 beforeDestory、destoryed 钩子。

如果以性能为准则：

• v-if 具有更高的切换成本（每当条件更改时）
• v-show 具有更高的初始渲染成本。

因此，如果您需要频繁切换某些内容，请使用 v-show。如果条件在运行时变化不那么频繁，请使用 v-if。

另一件要考虑的事情是使用 v-if 允许我们将其他逻辑块与它结合使用。具体来说，我们可以使用 v-else 和 v-else-if 块来真正将高级逻辑构建到我们的应用程序中。