vue の v-if と v-show の違いは何ですか

相違点: 1. 「v-if」は判定条件に基づいてDOM要素を動的に追加・削除し、「v-show」は判定条件に基づいて動的に要素を表示・非表示にする; 2. 「v- if が高く、v-show の初期レンダリングコストが高い; 3. v-show のパフォーマンスが v-if などよりも高い。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

v-ifとv-showの違いはフロントエンドの面接でよく聞かれる基礎知識ですが、v-ifとv-showはその名の通り、表示効果を判定するために使用されます。ビューレイヤー。では、具体的にはどのように表示されるのでしょうか？ v-if と v-show はどう違いますか?

まず最初に、Vue 中国語コミュニティ ドキュメントの概要を見てみましょう:

Vue 中国語コミュニティ ドキュメントには次のように書かれています。 rendering 条件付き判定表示を行う;

実際の開発では、判定表示にv-ifやv-showを使うことが多いですが、このように理解できます:

<div>
   <img  src="/static/imghwm/default1.png" data-src="../assets/img/mall_none_order.png" class="lazy" alt="vue の v-if と v-show の違いは何ですか" >
</div>

上の例では、v -if の機能は、upload と list.length

逆に判定条件が成立しない場合は v-if は表示されません;

<div>
   <img  src="/static/imghwm/default1.png" data-src="../assets/img/mall_none_order.png" class="lazy" alt="vue の v-if と v-show の違いは何ですか" >
</div>

実際に上記を変更することができます判定のためにケースコードを v-show に渡します。視覚効果も同じです。注: 視覚効果だけが同じであり、両者の間に同等の関係はありません (後で分析します)。条件の負荷を判定するには v-show を使用してください。が true かつ list.length

上記の通り、v-if や v-show は判定条件に基づいて表示する効果を得ることができますが、これは、両者が等しいという意味ではなく、視覚効果が同じであるというだけです。v-if と v-show の違いと注意点について話しましょう:

#v-ifを使用すると、ブラウジング時にブラウザが要素クラスtcのdivをレンダリングしていないことがわかります。これは、v-ifの判定条件が真の場合のみ、ブラウザがタグを生成してブラウジング中にレンダリングするためです。それ以外の場合、判定条件が false の場合、ブラウザは生成されたタグを描画しません。

それでは、考えてみましょう。条件が false の場合、ブラウザはタグを生成せず、レンダリングも行いません。条件が true の場合、ブラウザはレンダリングのみを行います。これはページのパフォーマンスを大量に消費しますか?

判断条件が 1 つのシナリオだけではなく、複数のシナリオの場合はどうなるでしょうか?それでは、今何をすべきでしょうか？ Vue は v-else 命令を提供します。v-else は v-if 専用の命令です。v-else は v-if と一緒にのみ使用できます。

判定レンダリングに v-show を使用すると、div タグとその中の img が生成されてレンダリングされますが、ブラウザがインライン スタイルに display:none 属性を追加していることに気付きました。存在しますが、ブラウザはそれを隠します;

実際には、ブラウザは判定条件に基づいてインライン スタイルを変更するだけです。条件が true の場合、インライン スタイルは、条件が true の場合、display:block; になります。 false、インライン スタイルが表示されます: block。ジョイント スタイルを display:none に変更します。

v-show は、追加や削除を行わずにスタイルを動的に変更するだけであるため、v-show は実際には v-if よりもパフォーマンスが高くなります。 DOM 要素ですが、多くの状況に遭遇します。分岐判断を行うときに v-show を v-else と組み合わせて使用​​することはできません。そのようなシナリオで v-show を使用する場合の解決策は、v-show を再度使用して別の論理的な判断を記述することです。

## 相違点のまとめ: 1. v-if の原理は、判断条件に基づいて DOM 要素を動的に追加および削除することですが、v -show は、判定条件に基づいて動的に表示するものであり、隠し要素も含まれています。DOM 操作の頻繁な追加と削除は、ページの読み込み速度とパフォーマンスに影響します。このことから、次の結論が得られます:

When your projectプログラムはそれほど大きくないため、v-if と v-show を使用して表示と非表示を判断できます (このシナリオでの v-if の使用は、影響がないわけではなく、ほとんど影響しません);

使用することはお勧めできません。プロジェクトプログラムが比較的大きい場合 v-if は表示・非表示の判定に使用します v-show;

2 の使用を推奨します v-if の切り替えには部分的なコンパイル/アンインストール処理が含まれます切り替えプロセス、内部イベント リスナーとサブシステムは適切に破棄され、再構築されます。コンポーネント; v-show は CSS に基づいた単純なスイッチです。

3. v-if は遅延です。初期条件が false の場合、何もしません; 初めて条件が true になった場合のみ 部分コンパイルを開始します (コンパイルはキャッシュされていますか? コンパイルがキャッシュされた後、切り替え時に部分アンインストールが実行されます); v-show は任意の条件下でコンパイルされます (コンパイルがキャッシュされているかどうかに関係なく)。最初の条件が true)、その後キャッシュされ、DOM 要素が保持されます ;

4. v-if はスイッチング コストが高く、v-show は初期レンダリング コストが高くなります。

頻繁に切り替える場合は v-show を、動作条件がほとんど変わらない場合は v-if を使用するとよいでしょう。

5. v-show は v-if よりもパフォーマンスが高くなります。

v-show は DOM 要素の追加や削除を行わずにスタイルを動的に変更することしかできないためです。したがって、プログラムがそれほど大きくない場合、v-if と v-show には大きな違いはありませんが、プロジェクトが非常に大きい場合は、v-show を使用することをお勧めします。これにより、後のブラウザーのパフォーマンスが低下します。オペレーション。

6. v-if は変化する可能性が低い動作条件に適しており、v-show は頻繁な切り替えに適しています。

関連する推奨事項: 「vue.js チュートリアル 」

以上がvue の v-if と v-show の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。