v-if・v-showは両方とも、条件にもとづいて要素の表示・非表示を切りかえるためのディレクティブです。ですが、内部的な動作が異なるようです。
v-ifとv-showの使い分けについて、先輩エンジニアからのレビューをもとに、備忘録としてまとめます。
最後まで読めば、両者の性質の違いや使うべき場面について理解できるかなと思います。
記事の信頼性
- ぼくは独学で未経験から従業員300名以上の自社開発企業へ転職しました。
- 実務ではVue.jsとRailsを毎日書いています。
- 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。
v-ifとは
v-ifで要素の表示・非表示を切り替える場合、そのたびにDOMへ要素の描画・削除を実行します。
また初期表示において v-if に渡される状態が false であれば、最初に true になるまで要素を描画しません。
なので最初のページロードが軽くなりますが、いちいち描画・削除をしてしまう分、表示・非表示の切り替えはv-showと比べて遅いです。
そのため、 v-if は表示状態があまり変わらない、もしくは初期時点で非表示となる要素に使うと良いです。
v-showとは
v-showの場合、初期条件にかかわらず最初に必ず要素を描画します。
表示・非表示の切り替えはCSSのdisplayプロパティによって行われ、非表示であっても要素は描画されたままの状態です。
なので初期表示のスピードはv-ifに劣りますが、その代わりに表示・非表示の切り替えスピードはv-ifよりも高速です。
そのため、v-showは表示状態が頻繁に変わる要素に使うと良いです。
v-ifとv-showそれぞれの使いどころ
ぼくの場合、具体例ベースじゃないとイメージが湧かなかったので、それぞれのユースケースを考えてみました。
v-ifの使いどころ
v-ifの使いどころとして、以下の3つを考えてみました。
- ログイン状態に基づくヘッダーナビゲーション
- アカウント権限に応じた機能制限
- エラーメッセージ
ログイン状態やアカウント権限は頻繁に変わるわけではないため、適切かなと思います。
エラーメッセージはエラーとなる条件を満たすまではDOMに存在しなくてよいため、こちらもv-ifを使うのが適切かなと考えました。
以下はログイン状態にもとづくヘッダーナビゲーションの簡易的な実装例です。
<template>
<nav>
<a v-if="isLoggedIn" href="/profile">プロフィール</a>
<a v-else="!isLoggedIn" href="/login">ログイン</a>
</nav>
</template>上記の例だと、isLoggedInがtrueの場合はプロフィールへのリンクだけが表示され、ログイン画面へのリンクは表示されず、DOMからも削除された状態となります。
isLoggedInがfalseの場合はその逆です。
v-showの使いどころ
v-showの使いどころとして、以下の3つを考えてみました。
- タブの切り替え
- ドロップダウンメニュー
- レスポンシブデザインの表示制御
タブの切り替えやドロップダウンは頻繁に切り替えが生じ、かつ即時性が重視されるため、v-ifよりもv-showを使った方が良さそうです。
レスポンシブデザインにおいても画面サイズに応じたスムーズな切り替えが求められるためv-showが有効なように思いました。
以下はタブ切り替えの簡易的な実装例です。
<template>
<div v-show="activeTab === 'home'">ホーム</div>
<div v-show="activeTab === 'profile'">プロフィール</div>
</template>上記の例だと、最初のページロードでホームタブ・プロフィールタブどちらもDOMに描画され、内部的にはCSSのdisplayプロパティで表示・非表示を切り替えます。
表示されていないタブもDOMから削除されているわけではありません。
まとめ
v-ifは要素の表示・非表示を切りかえるたびに、いちいちDOMの描画・削除をすること、v-showは最初にDOMへの描画を済ませてあとはCSSで表示・非表示を切りかえることを学びました。
コメント