はじめに
こんにちは。エンジニアの仕事をしている、たかふみです。
今日はVue.jsの基本中の基本である、v-ifと、v-showの違いについてまとめていきたいと思います。
v-ifとは
基本中の基本ですが、v-ifとは表示するDOM要素をif文で分岐させるためのものです。
たとえば、以下のようなコードがあったとします。
<script setup> import {ref} from 'vue' const ifValue = ref(false) </script> <template> <div v-if="ifValue">v-ifですよ</div> </template>
上記の実行結果はどうなるでしょうか？ifValue の値はこの場合、falseとなっており表示されません。
つまり、HTMLの要素レベルで出力するかどうか表示を分岐するのが、v-ifの役割なのです。
v-showとは
v-ifに対して、v-showとは何でしょうか。下記コードを実行してみます。
<script setup> import {ref} from 'vue' const ifValue = ref(false) </script> <template> <div v-show="ifValue">v-ifですよ</div> </template>
すると、以下の結果が出力します。
<div style="display: none;">v-ifですよ</div>
つまり、style要素を使用して、HTML要素の表示、非表示をしているのが、v-showなのです。
v-showが何故か動かない時がある
ただし、以下の場合、正常にv-ifが動作しないのでお気をつけてください。
<script setup> import {ref} from 'vue' const ifValue = ref(false) </script> <template> <div v-show="ifValue" style="display: block">v-ifですよ</div> </template>
上記の結果は、「v-ifですよ」が出力されます。
styleで設定したdisplay: blockよりも、どうやらv-ifのほうが優先されますので、なるべくstyleやCSSの表示非表示と、v-showは併用しないようにしましょう。
ブラウザがHTMLのスタイル解釈に困ってしまっているようです。
v-ifとv-showの違い
つまり、v-ifは、HTMLの要素そのものを表示非表示を切り分けるが、v-showは、HTML要素のスタイルを変更して表示非表示を行っているということです。
v-ifは、HTMLをまるごと出力しますが、v-showはstyleをdisplay: blockまたは、display: noneにすることで表示非表示を制御していることになります。
v-ifとv-showの使い分け方
v-ifは要素レベルの表示制御、v-showはスタイルの表示制御をしています。
それら２つを使い分けるケースを並べます。
v-ifを使うべきケース
HTML要素まるごとレンダリングしますので、v-ifの分岐がめったに走らない場合に有効です。
APIから値を取得し、その値によって表示を出し分けするなどの場合、めったに条件分岐が発生しません。この場合は、v-ifを使用して条件分岐させるのが適切です。
v-showを使うべきケース
HTMLの可視制御がしばしば発生する場合は、v-showを使用したほうが良いです。なぜならHTMLタグまるごと変更するのではなく、styleのプロパティのみを変更するからです。
つまり、v-ifよりも、v-showのほうが、レンダリングコストが低いため、メモリに優しいということです。
終わりに
DOMに条件を付与する歳、v-ifなのか、v-showどっちを使うべきなのか？
その違いは何なのか悩む場合があると思いますが、その時の判断基準に当記事で書かれている内容を参考にしていただけたらと思います。
それでは、ありがとうございました。
