【Vue.js】v-ifとv-showによる表示、非表示の切り替えの違い

sample.vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <button @click="changeShow">ボタン</button>
  <p v-if="isActive">if</p>
  <p v-show="isActive">show</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isActive: true
    },
    methods: {
      changeShow() {
        this.isActive = !this.isActive
      }
    }
  })
</script>

上記の様な、ボタンをクリックすると、「if」の文字と「show」の文字の表示・非表示が切り替わるプログラムがある。

v-ifの場合は、条件がfalseの場合、DOM自体

<p v-if="isActive">if</p>

が消滅する。

v-showの場合は、条件がfalseの場合、DOMに display:none　が追加されて非表示となる。

<p style="display:none">show</p>

v-showのデメリット

・非表示時の挙動は、ページ読み込み時に一旦、全てのDOMを読み込んでからdisplay:noneで非表示にするため、DOMそのものを読み込まないv-ifに比べて初期読み込み時の動作が重くなる。

・v-elseのように、falseの場合に別処理を実行することができない。

・タグには使用できない。(templeteタグはそもそもhtmlに表示されないので、display:noneのつけようがない）

v-ifのデメリット

表示・非表示の切り替え時に、DOMを直接操作するため、display:noneを与えるだけのv-showに比べて、動作が重くなる。

適材適所は？

頻繁に表示・非表示を切り替える必要がある場合は、"v-show"。それ以外は、"v-if"を使うのがベター。