Frontend | Вопросы собесов

Назови отличия директив 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 разработчика. Ставь 👍 если нравится контент



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