【Vue.js】v-showとv-ifの違いと使い分け

【Vue.js】v-showとv-ifの違いと使い分け

Vue.jsには、要素の表示/非表示を切り替える方法として、「v-if」と「v-show」の2つがあります。
どちらでも要素をブラウザ上に表示させないようにできるのですが、この2つの方法による違いを考えてみたいと思います。

v-showの使い方

コード例を示します。
まずは、非表示の状態です。

See the Pen wRmpBZ by 匠 (@dilphinrokujiro) on CodePen.

次に、表示されている状態です。

See the Pen KboZzp by 匠 (@dilphinrokujiro) on CodePen.

v-ifの使い方

コード例を示します。
まずは、非表示の状態です。

See the Pen zyWpwz by 匠 (@dilphinrokujiro) on CodePen.

次に、表示されている状態です。

See the Pen wRmpJV by 匠 (@dilphinrokujiro) on CodePen.

 

v-showとv-ifの違い

結果だけをみると、まったく変わらないように見えますが、内部的にはどうなっているのでしょうか?
デベロッパーツールで、レンダリングされたソースを表示してみてみると、その違いがわかります。

v-showは「要素は描画されて、隠される」

v-showを使って要素を非表示にしている場合のソースを見てみます。

要素に対して、cssでdisplay:noneがかけられています。
つまり、v-showで非表示にすると、要素は描画されて、cssによって隠されている状態になります。

 

念のため、v-showを使って要素を表示している場合のソースも見てみます。

要素は描画され、cssの指定もされていません。

v-ifは「要素そのものが描画されない」

v-ifを使って要素を批評にじている場合のソースを見てみます。

要素そのものが描画されていないことがわかります。

 

念のため、v-ifを使って要素を表示している場合のソースも見てみます。

要素は描画されています。もちろん、cssの指定もされていません。

v-showとv-ifの違いと使い分け、注意点

初期表示のコスト

v-showは、falseの場合でも、最初に要素が描画されるので、初期表示のコストがかかります。
v-ifは、falseの場合は最初に要素が描画されません。なので、初期表示のコストがかかりません。

表示切り替えのコスト

v-showは、表示/非表示を切り替える際、cssで制御します。つまり、要素の描画はされないので、切り替えのコストはかなり低いです。
v-ifは、表示/非表示を切り替える際、要素を描画したり、削除したりするので、切り替えのコストが高いです。

表でまとめると、こんな感じです。

初期表示コスト 切り替えコスト
v-show 高い 低い
v-if 低い 高い

どう使い分けるべきか

ページ表示後に要素の表示切り替えが頻繁に発生するような場合は、v-show。
ページ表示後に要素の表示切り替えがほとんど発生しない場合は、v-ifを使うようにしましょう。

v-showを使う場面を想像してみます。
例えば、購入金額が10000円以上の場合に送料が無料になる。というような機能があるとします。
10000円未満なら、「あと〇〇円で送料が無料になります」という文言を表示し、
10000円以上になれば、その文言が消えるようにします。
カート内で商品の数を変えるなど、ページ遷移せずに購入金額が変動する可能性があるため、表示切り替えが頻繁に発生すると考えていいでしょう。
この場合は、v-showを使って表示切り替えを行います。

今度は、v-ifを使う場面を想像してみます。
会員のみに、特定の商品を表示したい場合があるとします。
ログインする、もしくは会員登録するまでは、その商品は表示されることがありません。
つまり、ページ遷移なしで要素の表示切り替えは発生しないはずなので、この場合は、v-ifを使って表示切り替えを行います。

まとめ

ページ表示後に要素の表示切り替えが頻繁に発生するような場合は、v-showを使う
ページ表示後に要素の表示切り替えがほとんど発生しない場合は、v-ifを使う。

Vue.jsについて体系的に学ぶなら、以下の本がめちゃくちゃオススメです。