まず、公式の説明:
v-if
それは条件ブロック内のイベントリスナーとサブコンポーネントが破壊され、ハンドオーバ処理に適切に再構築されることを保証するので、レンダリング「本当の」条件です。v-if
それは不活性状態は初期レンダリング時に偽である場合は、何もしない-最初の時間は、条件付きのブロックをレンダリングするために開始されたときに、条件がtrueになるまで:。- これとは対照的に、
v-show
それははるかに簡単ではない-に関係なく、初期条件は、要素が常にレンダリングされ、単にCSSスイッチに基づいてどうなりますか。 - 一般的に、
v-if
高いオーバーヘッドスイッチング、およびv-show
レンダリングの高い初期費用を持っています。非常に頻繁に切り替える必要がある場合はそのため、使用されv-show
、好ましくは、条件はほとんど動作中に変化しない場合、使用されているv-if
好ましいです。
第二に、個人的な理解:
- 同じポイント:V-ショーとV-場合、コントロールが表示され、要素を非表示にすることができます。
- 違い:
- 本質的に異なる方法
- 基本的にCSSを設定することで、V-ショーの表示はなし、制御非表示です
- であれば、V-動的にDOMツリーにDOM要素を追加または削除
- 違いコンパイル
- V-showが制御CSSに実際にあります
- V-場合のハンドオーバ手順が破壊と再適切イベントリスナーの切り替え及びサブアセンブリの内部ローカルコンパイラ/アンロード工程を有します
- 条件をコンパイルします
- V-ショーは初期値がfalseで、コンパイルされますが、表示がnoneに設定されているが、それはまた、コンパイル
- V-場合はfalseの初期値は、コンパイルされません。
- 演奏
- V-ショーは対照CSSの後ろに、実際には、一度だけコンパイルされ、破壊と創造を停止しない場合は、V-、それは少し良く、V-ショーのパフォーマンスです。
- 注意事項:V-ショー、実際の運転画面ため:「」またはなし、CSS自体は表示があります。v-ショーの表示を任せることはできないとき、どれを
- 要約:ノードへの頻繁なハンドオーバは、(このようにオーバーヘッドが大きく初期オーバーヘッドが小さく、スイッチング、CSSを隠すことによって表示を制御した後、初期にレンダリングするtrueまたはfalseかどうか)は、V-ショーを使用している場合、スイッチが頻繁に必要としない場合場合にV-IFを使用して、ノードは、(遅延ロードとして、最初に偽、レンダリングされませんが、それは要素がディスプレイと隠されるので、初期レンダリング小さいオーバーヘッドを制御するために、DOM追加および削除することによるものであるので、オーバーヘッドを切り替えることは比較的大きいです)