v-if 和 v-show 的區(qū)別

如果你是一名 Vue.js 開發(fā)者，你可能已經(jīng)知道這兩者的區(qū)別。如果還不清楚，讓我們來了解一下：

• v-if：用于有條件地渲染一個塊。
• v-show：用于有條件地顯示一個塊。

v-show 只會渲染一次，并且會一直保留在 DOM 中，只是通過切換 CSS 的 display 屬性來控制顯示與否。

這意味著，如果你有一個重量級的組件，且渲染成本很高，你可以先渲染一次（使用 v-if），然后通過 v-show 來切換顯示狀態(tài)，而不需要重新渲染。

示例

<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