Built-in Special Attributes

key

Специальный атрибут key (ключ) в первую очередь используется как подсказка для алгоритма виртуального DOM Vue для идентификации VNodes (виртуальных узлов) при вычислении разницы между обновленным списком узлов и старым.

Ожидает number | string | symbol
Подробности
Без ключей Vue использует алгоритм, который минимизирует перемещение элементов и пытается изменять/переиспользовать элементы одного типа как можно больше. При использовании ключей Vue переупорядочивает элементы на основании изменения ключей, а элементы с ключами, которые уже отсутствуют, будут всегда удаляться/уничтожаться.
Потомки одного и того же общего родителя должны иметь уникальные ключи. Дубликаты ключей будут приводить к ошибкам рендера.
Чаще всего используется в сочетании с v-for:
template
```
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
```
Также может использоваться для принудительной замены элемент/компонента вместо его переиспользования. Это может пригодиться, если вы хотите:
- Корректно вызвать хуки жизненного цикла компонента
- Запускать анимации перехода
Например:
template
```
<transition>
  <span :key="text">{{ text }}</span>
</transition>
```
При изменении значения text, элемент <span> будет всегда заменяться, вместо обновления его содержимого, поэтому будет запускаться анимация перехода.
См. также Руководство — Рендер списка - Сохранение состояния с помощью key

ref

Означает ссылку на элементы шаблона.

Ожидает string | Function
Подробности
Атрибут ref используется для регистрации ссылки на элемент или дочерний компонент.
В Options API, ссылка будет зарегистрирована в объекте компонента this.$refs:
template
```

<p ref="p">hello</p>
```
В Composition API, ссылка будет храниться в ref с соответствующим именем:
vue
```
<script setup>
import { ref } from 'vue'

const p = ref()
</script>

<template>
  <p ref="p">Привет</p>
</template>
```
При использовании на обычном DOM-элементе ссылка будет указывать на этот элемент; при использовании на дочернем компоненте ссылка будет указывать на экземпляр дочернего компонента.
В качестве альтернативы ref может принимать функцию, что даёт полный контроль над тем, где хранить ссылку:
template
```
<ChildComponent :ref="(el) => child = el" />
```
Важное замечание о времени регистрации ref-ссылок: поскольку эти ссылки создаются render-функцией, нужно подождать, пока компонент будет смонтирован, прежде чем обращаться к ним.
Так же свойство this.$refs не реактивно, поэтому не следует использовать его в шаблонах для привязки данных.
См. также

is

Используется для динамических компонентов.

Ожидает string | Component
Использование на нативных элементах ^3.1+
Когда атрибут is используется на нативном HTML-элементе, то он интерпретируется как пользовательский встроенный элемент. Это нативная возможность веб-платформы.
Однако есть случай использования, когда может понадобиться, чтобы Vue заменил нативный элемент на компонент Vue, как это разъясняется в Особенности парсинга DOM-шаблона. В таком случае можно добавить значению атрибута is префикс vue:, чтобы Vue вместо элемента отрисовал компонент Vue:
template
```
<table>
  <tr is="vue:my-row-component"></tr>
</table>
```
См. также
- Специальные встроенные элементы - <component>
- Динамические компоненты

Исправить эту страницу на GitHub

Built-in Special Attributes ​

key ​

ref ​

is ​

Built-in Special Attributes

key

ref

is