v-ifとv-showについて-Vue.js

Vue.jsにおいて条件分岐によって表示をコントロールする方法は主にv-ifとv-showの二種類あります。

ここでは、v-ifとv-showの違いや使い分けをサンプルコードを参考に解説していきます。

v-ifとv-showの違い

同じような振る舞いをしますが、違う点は描画の仕方です。v-ifは表示されないときDOM自体が描画されませんでしたが、v-showでは常にDOMを描画し、表示・非表示の切り替えはdisplayプロパティによって行われます。

<div id="app">
  <div v-if="flag">v-if：描画される</div>
  <div v-if="!flag">v-if：描画されない</div>
  <div v-show="flag">v-show：表示される</div>
  <div v-show="!flag">v-show：表示されない</div>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      flag: true
    }
  })
</script>

<div id="app">
  <div>v-if：描画される</div>
  <!---->
  <div>v-show：表示される</div>
  <div style="display: none;">v-show：表示されない</div>
</div>

v-ifの特徴

v-ifの特徴は主に以下のような点があります。

• DOMレベルで操作される
• 監視も解除される
• コンポーネントならインスタンスも破棄される

DOMレベルで操作するので、描画コストはどうしても高くなってしまいますが、監視やインスタンスも切り替えされるので、複雑な構造を持つ要素などを監視から外すことでパフォーマンスの改善が期待できます。

v-showの特徴

v-showの特徴は主に以下のような点があります。

• スタイルで操作される
• 監視は続く
• templateタグには使えない

基本的にスタイルでの操作はDOMレベルで操作するよりも描画コストは低いので、単純な構造で切り替え頻度の高い要素はv-ifよりもv-showを用いることでパフォーマンスの改善が期待できます。

使い分け方

先に示したような特徴からv-ifとv-showの使い分けの基本的な基準となるのは、切り替えのコスト（頻度）と 初期描画のコストとなります。

スタイル操作よりもDOM操作の方が基本的に描画コストが高くなってしまうので、切り替え頻度が高い場合はスタイル操作による切り替えのv-show、ほとんど切り替えのない場合は、DOMレベルで削除されるv-ifを使うと良いでしょう。

しかし、単純な構造を条件分岐の対象とするならいいのですが、内部構造に様々なデータを持つ要素が含まれる場合などは一概にどちらが良いとは言い切れなくなってしまいます。

アプリケーション全体に影響ない程度のコストであればそこまで考えなくていいとは思いますが、そうもいってられない場合は切り替えの仕組みなどを一から見直す必要があるかもしれません。

まとめ

今回はv-ifとv-showの違いや使い分けを解説しました。 時間があれば簡単なパフォーマンス比較を行ってみたいと思います。