Skip to content
Содержание

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

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

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

Встроенные специальные атрибутыУже загружено