blog logo

Vue.jsのv-ifとv-showの違いを解説する

thumnail
2019-10-04

v-ifとv-showの役割

DOM要素の表示/非表示の制御

v-ifもv-showも条件のtrue/falseによってこの属性を付与したDOM要素の表示/非表示を切り替えることができる。

<h1 v-if="awesome">V-IF</h1>
<h1 v-show="awesome">V-SHOW</h1>

awesomeがtrueなら表示、falseなら非表示になる。

v-ifとv-showの違い

DOMを削除/非削除

両者の違いはDOM要素を非表示にするときに「DOM自体を削除する」か「DOM自体は削除しない」という点だ。

v-if v-show
DOMを削除 DOMは維持

v-ifの場合、Booleanがtrue/falseになるたびにDOMを生成/削除する。一方、v-showはDOM自体を削除して表示の切り分けはせずにcssの「display:none」を付与するかどうかで表示を切り替える。

v-ifとv-showの使い分け

ブラウザの負荷を考慮する

v-if/v-showでの画面の表示/非表示をするときにそれぞれブラウザにかかる負荷が異なる。

コスト

v-if v-show
負荷が高い 負荷が低い

v-ifは表示/非表示を切り替えるにあたって、DOMを毎度「生成/削除」するので、ブラウザに掛かる負荷が高くなる。一方、v-showはcssで表示/非表示を切り替えているだけなのでv-ifよりも負荷が低い。

v-ifは遅延描画

v-ifは遅延描画といって、条件文がtrueになるまでDOMは生成されない。なので非同期処理などを噛ませると画面の一番初めのレンダリング負荷が分散され、結果的に読み込みが速くなったりする。それに対して、v-showは初期レンダリング描画される。

どう使い分けるか

結論、何回も表示/非表示を切り替える処理が求められる場合は、DOMの追加/削除を行わないv-showを使うべき。それ以外の場合はv-ifが良い。

v-if v-show
単発の切り替えがメインの場合 表示/非表示の切替回数が多い場合

まとめ

  • v-ifはDOM自体を削除して表示/非表示を制御する
  • v-showはDOMにCSSをあてて表示/非表示を制御する
  • 表示の切り替えがすくないときはv-if、多い時はv-showを使うと良い
profile

KATUO

web developer

六本木のミドルベンチャーでwebエンジニアをやってます。普段はフロントからサーバーサイド、インフラ周りといった領域を幅広く触ってます。

twitter-icongithub-icon

KATUBLO

Copyright since 2018 KATUO All Rights Reserved.