v-if 和 v-show 的区别

如果你是一名 Vue.js 开发者，你可能已经知道这两者的区别。如果还不清楚，让我们来了解一下：

• v-if：用于有条件地渲染一个块。
• v-show：用于有条件地显示一个块。

v-show 只会渲染一次，并且会一直保留在 DOM 中，只是通过切换 CSS 的 display 属性来控制显示与否。

这意味着，如果你有一个重量级的组件，且渲染成本很高，你可以先渲染一次（使用 v-if），然后通过 v-show 来切换显示状态，而不需要重新渲染。

示例

<template>
  <div v-if="isRendered">
    <div v-show="isVisible">
      <MyHeavyComponent/>
    </div>
  </div>
</template>

如果我们只使用 v-show，就无法控制渲染时机，组件会立即被渲染（即使不显示），而不受任何条件限制。

原文地址：https://dev.to/biomousavi/why-you-should-use-both-v-if-and-v-show-to-toggle-heavy-components-in-vue--3383