Можно ли использовать key без v-for во Vue

«Можно ли использовать key без v-for во Vue» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, можно. key в Vue используется не только с v-for, но и для принудительного перерендеринга компонента или элемента. Это полезно, когда нужно:

  1. Сбросить состояние компонента при изменении данных
  2. Заставить Vue пересоздать элемент вместо обновления

Пример:

<template>
  <div>
    <ChildComponent :key="componentKey" />
    <button @click="rerender">Перерендерить</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    rerender() {
      this.componentKey += 1
    }
  }
}
</script>

При изменении componentKey Vue уничтожит старый экземпляр ChildComponent и создаст новый.