Встроенные специальные атрибуты ​

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

  <!-- Хранится в this.$refs.p -->
  <p ref="p">hello</p>

  В Composition API, ссылка будет храниться в ref с соответствующим именем:

  vue

  <script setup>
  import { useTemplateRef } from 'vue'
  
  const pRef = useTemplateRef('p')
  </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>
  • Динамические компоненты