web-dev-qa-db-ja.com

vue.js 2でより良いものは何ですか、v-ifまたはv-showを使用しますか？

vue 2.のプロジェクトで作業しています。どちらの場合にパフォーマンスが良いかを知る必要があります：v-ifまたはv-showを使用しますか？。長いリストと各アイテムのリストにはフォームが非表示になっているため、各アイテムリストのあるボタンをクリックするには表示と非表示を切り替える必要があります。v-showのトグルクラスまたはv-ifを使用してフォームを追加および削除する方がよいのは何ですか。

javascriptperformancecomponentsvue.jsvuejs2
14
Jedidias

tl; dr

問題が厳密にパフォーマンスに関するものであると仮定します。

  • v-show：高価な初期ロード、安価な切り替え、
  • v-if：安価な初期ロード、高価な切り替え。

Evanあなたは VueJSフォーラム でより詳細な回答を提供しました。

v-showは常にすべてをコンパイルしてレンダリングします-要素に「display：none」スタイルを追加するだけです。初期ロードコストは高くなりますが、切り替えは非常に安価です。

比較すると、v-ifは完全に条件付きです。遅延であるため、初期条件がfalseの場合、何も実行されません。これは、初期ロード時間に適しています。条件がtrueの場合、v-ifはそのコンテンツをコンパイルしてレンダリングします。 v-ifブロックを切り替えると、実際にはその中のすべてが破棄されます。 v-if内のコンポーネントは、切り替え時に破棄され、再作成されるため、巨大なv-ifブロックの切り替えは、v-showよりもコストがかかる可能性があります。

26
bypatryk

短い答え：状態がそれほど頻繁に変化しない場合は、v-ifを使用します。より頻繁に条件を切り替えたい場合は、v-showを使用します。

注：条件がfalseの場合、v-showは要素をDOMから削除しません。したがって、Firebugなどを使用してページを検査すると、人々はそれを見ることができます。

6
Ron van Asseldonk

V-showは、cssのプロパティdisplayを切り替えるだけです（ "none"または "block"）。 v-showを使用すると、html domはページ上にのみ表示されます（ "display"プロパティを使用）。

ただし、v-ifを使用する場合と同様に、dom全体をページから削除するか、条件に基づいてdom全体を再作成します。

この例を確認してください。

<p v-if="ok">If Check</p>
<p v-show="ok">Show Check</p> //try to set "ok" by true and false and inspect html
1
PALLAMOLLA SAI

「v-if」の使用を追加すると、要素の表示を変更する代わりに、要素をDOMに接続および切断するため、予期しない結果が生じる可能性があります。

たとえば、フォームで使用し、そのフォームをトグルするsing v-ifの場合、次のブラウザコンソール警告が表示されます。

    “Form submission canceled because the form is not connected”

'v-show'を使用すると、この問題は発生しません。

1
Mark Isbell

Vショー

DOM内のすべての要素を一度にロード/レンダリングし、値がfalsev-show = "false"の場合、要素の「なし」に表示

V-if

条件が満たされるまで要素をロード/レンダリングせず、条件が満たされると要素をレンダリングします

0
Rajat