v-ifとv-showの違いについて【Vue2】

環境

Vue:2.6.11

内容

Vue.jsのディレクティブv-ifとv-showは、どちらも条件によって画面の描画を切り替える機能を持ちます。

<template> 
  <div>
    <button type="button" @click="test=!test">ボタン</button>
    <p v-if="test">v-ifの表示</p>
    <p v-show="test">v-showの表示</p>
   </div>
</template>
  
<script>
export default {
  data() {
    return {
      test:true
    };
  },
};
</script>

ボタンを押すことでv-ifとv-showのどちらも非表示にします。

このときの動きをデベロッパーツールで見てみます。

・表示されているとき

・非表示のとき

v-ifでは要素そのものが消えており、v-showではstyle属性に”dispaly: none”が設定されることで非表示となっています。

v-ifでは要素そのものが消えるため、ボタンなどで頻繁に表示非表示の切り替えを行う場合は重くなってしまいます。一方v-showではfalseでも初期表示で要素の描画が必ず行われるので、v-ifと比べて初期処理表示の処理が遅くなりやすいです。

使い分けとしては、表示非表示を頻繁に切り替えるものはv-showを使い、表示が初期表示からほとんど変わらないものはv-ifを使うようにしています。