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

vue

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

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

エンジニアにイチ押しアイテム

目の疲労回復グッズ

ディスプレイをずっと見続けた時の目の疲労感ってすごいですよね。血行が悪くなっているというかズーンて重い感じがして、ひどい時は気持ち悪くなったりした経験をもつ人も多いのではないのかと思います。目って今後生きて行く上で非常に大切なものですし、ちゃんとにケアしていきたいものです。そこで私が日常的に使っている目のマッサージアイテムを紹介します。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

私は寝る前必ず使用しています。15分間目を40°で保温&マッサージしてくれて、本当に極楽の時間です。その後は快眠で、翌日の朝の目の疲労度が全くなくなりました。Amazonのレビューがこの商品の良さを物語っています。

筆者
筆者
303件レビューがついてて、評価が4.7と購入した方の殆どが「非常に満足」しているコスパ最強!超オススメのアイテムです!

座椅子DIYで疲労防止

長い間椅子に座って作業することはエンジニア、理系学生にとってはつきものだと思います。ですが、この椅子の性能によって作業後の疲労感が全く異なるということを意識したことがありますか?私は以下の2つのアイテムを使って座椅子をゲーミングチェア並みにアップデートしました。おかげで姿勢が安定し、作業後の疲労感も減りました。また何より集中して作業に打ち込めるようになりました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート
筆者
筆者
座椅子にホールド感が出て、座り心地が格段に向上します。長時間座っていても疲れにくくなるので引きこもりにならないように注意しましょう!作業に夢中で1日中座りっぱなしだった経験があるので...

コードの可読性を高める

自分が大型ベンチャーの内定インターンに初めて参加した時、周りの超優秀なエンジニアの方々のコードをみて自分のコードの汚さに絶望しました。その時自分のマネージャーに勧められた本がリーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニックという超有名な一冊です。美しいコードを書くためのエッセンスが凝縮されています。エンジニアを職種として選ぶ方は読まない理由がない一冊です。自分もこの本を読んで、かなりコーディングスキルが向上したと感じています。

ネットワークの基礎を押さえる本

ITの基礎がおぼつかなくて、ネットワークの話についていけなかった時、早稲田大学のエンジニアの友人が勧めてくれたのがネットワークはなぜつながるのか 第2版 という本です。ハードウエアから、理論までネットワークの基礎が非常にわかりやすく解説されています。「TCP」「IP」「リゾルバ」という用語を説明できないエンジニアは間違いなく買ったほうがいいです。自分は知らなくてバカにされたので。笑

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