v-show/v-if の使用シナリオと違い

v-if: これは true の条件付きレンダリングです。条件が false の場合、要素は DOM にレンダリングされません。条件に応じて要素を動的に追加したり削除したりするため、レンダリングとアンロードの処理が必要になります。
v-show: これは単純な条件付き表示です。条件が false の場合、要素には display: none CSS スタイルが追加され、要素が非表示になります。レンダリングやアンロードを行う必要がないため、パフォーマンスが向上します。

同じ点：

すべての非表示コンポーネントを動的に表示します

違い：

V-show の非表示は CSS の手段であり、要素に display:none を追加すると、dom 要素は DOM ツリー上に残ります。

v-if の非表示とは、dom 要素全体を追加または削除することであり、DOM ツリーから削除されます。

v-show の切り替えオーバーヘッドは小さいですが、初期レンダリングにオーバーヘッドが発生するため、切り替えが頻繁に行われるシーンに適しています。
v-if の切り替えオーバーヘッドは高いです。初期条件が false の場合、初回レンダリングの必要はありません。切り替えの頻度が低い場合、または切り替えない場合でも、v-if を使用することをお勧めします。
v-if が false から true に変化すると、アンインストールされたコンポーネントの beforeCreate、create、beforeMount、マウントされたフックがトリガーされ、true から false に変化すると、コンポーネントの beforeDestory メソッドと destroy メソッドがトリガーされます。 show は、コンポーネントの非表示の Any ライフサイクルフックをトリガーしません。
落とし穴と注意点(開発中に発生): v-show はテンプレートで使用すると無効ですが、v-if は有効です。

例えば：

たとえば、ユーザーがボタンをクリックしたときにモーダルボックスを表示する必要がある場合

<template>
  <div>
    <button @click="showModal = true">Show Modal </button>
    <div v-if="showModal" class="modal">
      Modal Content
    </div>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      showModal: false
    };
  }
};
</script>

この例では、がshowModalの場合はtrueモーダルボックスがレンダリングされ、それ以外の場合はレンダリングされません。モーダルが表示されていない場合はレンダリングされないため、使用するとv-ifアプリケーションのパフォーマンスが向上します。

v-show/v-if の使用シナリオと違い

同じ点：

違い：

おすすめ