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

key ​

Специальный атрибут key используется в основном как подсказка для алгоритма Virtual DOM Vue, чтобы идентифицировать узлы при сравнении нового списка узлов со старым.

• Ожидается: number | string | symbol

• Подробности

  Без ключей 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">привет</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" />

  Важное замечание по поводу времени регистрации: поскольку сами ссылки создаются в результате работы рендер-функции, вы должны подождать, пока компонент будет смонтирован, прежде чем обращаться к ним.

  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>
  • Динамические компоненті