《Vue.js》v-ifとv-showの違いとは?わかりやすく説明します

Vue.js

v-ifとv-showの役割

条件によってhtmlを画面に表示する

v-ifもv-showも条件のtrue/falseによってhtmlを画面に表示します。

awesomeがtrueなら表示、falseなら非表示になります。両者ともこの点で共通の機能です。

v-ifとv-showの違い

DOMを削除するか、維持するか

両者の違いは非表示にする際に「DOMを削除する」「DOMを維持する」の違いです。

v-if

DOMを削除

v-show

DOMは維持

v-ifの場合、表示が切り替える為に、DOMを消したり、追加したりします。一方、v-showはDOMはそのままでcssの「display:none」を付けるかどうかで表示を切り替えます。

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

画面の切り替えコストが異なる

結論からいうと画面の表示/非表示において、ブラウザにかかる負荷は以下のようになります。

コスト

v-if

v-show

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

v-ifは遅延描画

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

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

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

場面

v-if

単発の切り替えがメイン

v-show

表示/非表示の切替回数が多い

番外編:働くエンジニアにおすすめアイテム3撰

記事の内容とは別に、日々エンジニアの業務を行う上で役に立っているアイテムを紹介します。どれも実際に使って良いと思ったものだけ紹介していますのでその点はご安心ください。

目の保温マッサージ

毎日使っている目の保温マッサージ機です。使うと翌日の疲労感が全く違います。1日中PCと睨めっこの人は今すぐ購入することを強くお勧めします。

座っている時の負担を減らす

このサポート座布団を購入してからデスクワークの疲労が激減しました。価格も安く購入しやすいのでコスパ最強です。現在職場でも愛用しています。

自宅での作業効率をあげる椅子

ゲーミングチェアを購入して、自宅での作業効率が最大化しました。座った途端集中モードに入ります。家で作業する人は絶対に買っておきたいアイテムです。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方はエンジニアとして最低限知らないとまずい知識ですのでどこかで購入し、読むことをお勧めします。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございます。また技術、経済、株式投資などのことを Twitter でも呟いていますので良かったらフォローよろしくお願いします。

タイトルとURLをコピーしました