Vue.jsにおけるv-ifとv-showの違い

Vue.js

v-ifとv-showディレクティブは、条件分岐を行うことができるのですが、
挙動が少し異なります。

例えば、以下のコードで、ボタンを押下時に

要素を表示・非表示を切り替えてみます。

 

どちらの要素もdataのokがfalseになった時にはブラウザの画面からは消えますが、

コンソールを確認すると、下の様になり、異なっていることがわかります。

 

v-ifにおける描画

条件を満たさない場合は、DOM要素ごと削除されます。

監視も解除され、コンポーネントであればインスタンスが破壊されます。
また、次に描画されるときは初期化されて表示されます。

v-showによる描画

条件を満たさない場合はdisplay: noneが適用されてブラウザでは非表示となります。

実際にDOMから消えてはいないので、常にリアクティブで監視されています。

v-ifはグループ化が可能

たとえば、v-ifをテンプレート内のヘッダー、メイン、フッター全ての要素に付与するのは冗長です。

この場合、タグを使うことで複数の要素をグループ化することができます。

 

また、グループ化については、v-showでは使用できないないので気をつけましょう。