【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【低コスト】Wasabi オブジェクトストレージ 構築・運用サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【中国現地企業に対応】中国クラウド / サーバー構築・運用保守

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

[Vue.js] v-if と v-show の違い、使い分けのポイント

(この記事では、Vue.js v2.5.13 で動作確認をしました。)

Vue.jsの条件付きレンダリング用ディレクティブ v-if と v-show について、大まかな違いと使い分けについて書きたいと思います。

公式ドキュメントの v-if vs v-showを読んでもいまいちピンと来なかった方に読んでいただければ幸いです。

 

v-if と v-show の違い

使ってみる

使用例を示すため、JSFiddleを用意しましたので、ご覧ください。

また、Developer Toolsをご用意ください。(Chrome, FireFox, EdgeであればF12キーで開けます)

サンプルを軽くご説明すると、テンプレートがpタグ1個のみのコンポーネントAとBがあり、

それぞれv-if, v-showディレクティブで表示/非表示を切り替えようとしています。

ルートオブジェクトのdataには表示/非表示を表す2つのBoolean変数 toggleA, toggleB を用意しており,
コンポーネントAの埋め込みには v-if ディレクティブを(v-if="toggleA")
コンポーネントBの埋め込みには v-show ディレクティブを(v-show="toggleB")を付加しています。

toggleA,toggleBともに、対応するボタンA,Bをクリックすると、その真偽値が反転するようにしています。

さて、ページを開いた時点では、真偽値切替用のA,Bボタンしか表示されていないと思います。
しかしDOMツリー上ではページを開いた時点ですでにv-ifとv-showの違いが出ており、
コンポーネントAのDOMは存在しませんが、コンポーネントBのDOMは、 display:none のスタイルが適用された状態で存在しています。

これがすなわち、公式ドキュメントにある

v-if は 遅延描画 (lazy) です。 初期表示において false の場合、何もしません。条件付きブロックは、条件が最初に true になるまで描画されません。
一方で、v-show はとてもシンプルです。要素は初期条件に関わらず常に描画され、シンプルな CSS ベースの切り替えとして保存されます。

が意味するところです。

 

もう少し踏み込む

ここからはv-if, v-showの真偽値を繰り返し反転した際になにが起こるのかを見ていきます。
一度ページをリロードし(またはJsFiddleメニューのRUNを押す)、Developer Toolsのコンソールを見てください。

ページを開いた時点でコンポーネントB(v-show)のcreatedフックが実行されているのがわかると思います。
Bボタンを連打しv-showが false -> true -> false -> true と繰り返し変わっても、スタイルが変化するだけのため、createdフックは最初の一度しか実行されません。

反対に、Aボタンを連打するとAコンポーネント(v-if)のcreatedフックが何度も実行されることがわかるでしょう。
v-ifはtrueからfalseに切り替わったとき、DOMが消え去り、trueに切り替わり再出現した際には、dataも初期化されています。

 

使い分け

表示/非表示の切り替え頻度が高い、または非表示時もdataを保持する必要がある場合には v-show を
切り替え頻度が低い、または非表示時にdataを保持する必要がない場合には v-if を使うというのを基本方針にすると良いでしょう。

v-ifを使った場合のみv-elseディレクティブが使えますが、v-elseを使いたいという理由だけでv-ifを採用するのはあまりよろしくありません。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
3
読み込み中...
3 票, 平均: 1.00 / 13
9,901
X facebook はてなブックマーク pocket
【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【2024年2月~】25年卒 エンジニア新卒採用の募集を開始いたします!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author