【初心者向け】v-ifとv-showの違いを3分で解説！Vue.js 2.0

はじめに

この記事ではVue.js2を使っています。
v-ifとv-showを使ってみると挙動の違いがわからず調べてみました！
Vue.js公式から引用

v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

初心者でもわかるように解説します！

結論

v-showは、cssのdisplay:noneを使うことによって削除をしているだけなので切替のコストがv-ifより軽い。
v-ifは要素を作成、全削除を繰り返して切替えるので切替の多い場合はコストが重くなるので切替の少ない場合に利用しましょう。

v-ifの特徴

メリット

・v-elseを利用できる
・templateタグを使うことができ一括で切替ができる

デメリット

・切替が遅い
要素を作成、全削除を繰り返すのでコストが重くなる
(デペロッパー を使うと分かりやすいです！)

v-if.html

<!-- 要素が全て消される -->
<template v-if="false">
  <p >表示されない</p>
</template>

v-showの特徴

メリット

・cssのdisplay:noneを使うことで切替のコストがv-ifより軽い

デメリット

・要素をすべて表示した上でdisplay:noneを使っているため初期描画のコストが高くなる
・v-elseのようなものがない
・templateタグが使えない　

v-show.html

<!-- templateタグがcssによってdisplay:noneされても<p>は消されない -->

<template v-show="false">
  <p >表示される　　</p>
</template>

参考元