Frontend | Вопросы собесов on Telegram: “Назови отличия директив v show и v if ? Спросят…”

Назови отличия директив v show и v if ?
Спросят с вероятностью 7%

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

Основные отличия

1️⃣Рендеринг в DOM:
✅v-if: Элемент с v-if рендерится в DOM только тогда, когда условие истинно. Если условие ложно, элемент не создаётся и удаляется из DOM.
✅v-show: Элемент с v-show всегда рендерится в DOM, независимо от условия. Однако, его видимость контролируется с помощью CSS-свойства display.

2️⃣Переключение состояния:
✅v-if: Переключение между состояниями приводит к созданию или уничтожению элемента в DOM. Это может быть медленнее при частом переключении, так как каждый раз происходит перерисовка.
✅v-show: Переключение состояния происходит мгновенно, поскольку элемент уже присутствует в DOM, и меняется только его CSS-свойство display.

3️⃣Использование в условиях:
✅v-if: Рекомендуется использовать, когда элемент должен быть условно добавлен или удален из DOM. Полезно, когда условие меняется редко.
✅v-show: Рекомендуется использовать, когда необходимо часто переключать видимость элемента, поскольку это более производительно.

Примеры:

С v-if:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="isVisible">Этот текст отображается только если isVisible истинно</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> будет добавляться или удаляться из DOM при каждом нажатии на кнопку.

С v-show:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="isVisible">Этот текст всегда присутствует в DOM, но может быть скрыт</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> всегда присутствует в DOM, но его видимость контролируется с помощью CSS.

✅v-if: Условное добавление и удаление элементов в DOM.
✅v-show: Условное изменение видимости элементов с помощью CSS.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых