Vue.jsのネタを最近書いていなかったのですが、はて、v-ifとv-showってなにが違かったっけとふと思ったので、Vue.jsのv-ifとv-showの違いについて紹介したいと思います。
環境
- Vue.js 2系
v-ifとv-showの違い
公式ページを見るとv-ifとv-showの違いは下記のように記載されています。
v-if は、イベントリスナと子コンポーネント内部の条件ブロックが適切に破棄され、そして切り替えられるまでの間再作成されるため、”リアル”な条件レンダリングです。
v-if は 遅延描画 (lazy) です。 初期表示において false の場合、何もしません。条件付きブロックは、条件が最初に true になるまで描画されません。
一方で、v-show はとてもシンプルです。要素は初期条件に関わらず常に描画され、シンプルな CSS ベースの切り替えとして保存されます。
一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。
vue.js-条件付きレンダリング
jsfiddle.netで挙動を見て見る
実際にjsfiddle.netで挙動を見て見ると、v-ifを使用してもv-showをしても両方とも表示が表示・非表示されます。
しかし、表示は両方とも消えるのですが、違いがあります。
v-ifとv-showの違い
実際に、表示からは消えているのですが、実際のレンダリングの結果は下記のようになります。
<div id="app">
<!---->
<div style="display: none;">v-show</div>
</div>
v-ifはfalseだとDOMから消えてしまうのですが、v-showの場合は、display: none;されるという違いがあります。
また、v-ifはコンポーネントで使用した場合は、インスタンスは破棄され、次に描写されるときは、初期化されます。
v-ifとv-showの使い分け
v-ifはコンポーネントで使う場合、インスタンスは破棄され次に描写する時には、初期化されます。なので、v-ifを使用する際にはその点に注意しなければなりません。
しかし、v-showは、表示はされていなくてもリアクティブで監視されています。
なので、表示/非表示の切り替え頻度が高い、または非表示時もdataを保持する必要がある場合には、v-showを使用し、切り替え頻度が低く、または非表示時にdataを保持する必要がない場合にはv-ifを使う使い分けをすると良いと思います。