125 回閲覧されました

みなさんこんにちは、jonioです。

今回はvue.js3でのv-ifとv-showの違いについて簡単なサンプルコードを使って解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

サンプルコード

下記のコードで考えます。

<template>
  <div class="p-4">
    <button @click="show = !show" class="bg-blue-500 text-white px-4 py-2 rounded">切り替え</button>

    <div v-if="show" class="mt-4 bg-green-100 p-2">v-ifで表示中</div>
    <div v-show="show" class="mt-4 bg-yellow-100 p-2">v-showで表示中</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true);
</script>

<template>
  <div class="p-4">
    <button @click="show = !show" class="bg-blue-500 text-white px-4 py-2 rounded">切り替え</button>

    <div v-if="show" class="mt-4 bg-green-100 p-2">v-ifで表示中</div>
    <div v-show="show" class="mt-4 bg-yellow-100 p-2">v-showで表示中</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true);
</script>

v-ifとv-showのどちらも5・6行目の「show」がtrueでの時は表示されてfalseの時は表示されません。

大きな違いはfalseの場合に現れます。

v-ifの時はDOMから削除されるのに対してv-showは「display:none;」になるだけでDOM上には残っています。

「DOMから表示されたりされないのは分かったけどどう違いがあるんだろう？」と思うはずなので説明します。

違いページの読み込みのパフォーマンス

ページに最初は表示してなくて何らかのことをして1回しか表示しない場合は余計な読み込み回数が減るので表示のパフォーマンスがいいと言えます。

例えばあるページがあってログインした時しか表示しないメニューのリンクとかです。

こんな場合にv-showを使います。

それに対してハンバーガーメニューなど表示・非表示を何度も繰り返す場合はDOMから消したり表示したりするとページに負荷がかかるのでパフォーマンスがいいとは言えません。

こんな場合はDOMから消さないv-showが適していると思います。