В чем разница между директивами v-if и v-show?

v-if условно отрисовывает элемент, полностью удаляя его из DOM, если условие ложно. v-show всегда отрисовывает элемент, но переключает его CSS-свойство display между none и исходным значением в зависимости от условия.

Отличия в производительности / использовании:

• v-if: Более тяжелый начальный рендеринг, но лучше производительность при условии редкого переключения, так как элементы полностью удаляются из DOM.
• v-show: Легче начальный рендеринг, но лучше использовать для элементов, которые часто переключаются, так как это лишь изменение CSS-свойства.

Пример:

<!-- Использование v-if -->
<template>
  <div v-if="isVisible">
    Этот блок виден только если isVisible истинно
  </div>

  <!-- Использование v-show -->
  <div v-show="isVisible">
    Этот блок всегда в DOM, но виден только если isVisible истинно
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>