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

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

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

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

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

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

<!---->  //v-if非表示
<div style="display: none;">　　//v-show非表示
    v-showを表示
</div>
<button>表示・非表示</button>

v-ifにおける描画

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

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

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

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

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

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

<template v-if="ok">
  <header>ヘッダー</header>
  <main>メイン</main>
  <footer>フッター</footer>
</template>

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