# Специальные атрибуты
# key
Ожидает:
number | string
Специальный атрибут
key
в первую очередь нужен в качестве подсказки для Vue и его алгоритма виртуального DOM для идентификации VNode при сравнениях обновлённого списка узлов со старым. Без ключей Vue станет использовать алгоритм, который минимизирует перемещения элементов и по-максимуму старается изменять/переиспользовать элементы одного типа. При использовании ключей элементы будут переупорядочиваться в соответствии с изменением порядка следования ключей, а элементы с уже отсутствующими ключами всегда будут удаляться/уничтожаться.Потомки одного и того же общего родителя должны иметь уникальные ключи. Появление дубликатов ключей будет приводить к ошибкам при отрисовке.
Наиболее частый случай использования вместе с
v-for
:<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
1
2
3Но также можно использовать его для принудительной замены элемента/компонента вместо переиспользования. Это может быть полезно, когда потребуется:
- Корректно вызвать хуки жизненного цикла компонента
- Вызвать анимации перехода
Например:
<transition> <span :key="text">{{ text }}</span> </transition>
1
2
3При изменениях значения
text
, элемент<span>
будет всегда заменяться целиком, вместо обновления содержимого, а значит и анимация перехода будет запущена.
# ref
Ожидает:
string | Function
Атрибут
ref
используется для регистрации ссылки на элемент / дочерний компонент. Ссылка будет добавляться в объект$refs
родительского компонента. При использовании на обычном DOM-элементе ссылка будет указывать на этот элемент; при использовании на дочернем компоненте ссылка будет указывать на экземпляр компонента:<!-- vm.$refs.p будет DOM-узлом --> <p ref="p">hello</p> <!-- vm.$refs.child будет экземпляром дочернего компонента --> <child-component ref="child"></child-component> <!-- При динамической привязке, можно определить ref как коллбэк-функцию, явно передавая элемент или экземпляр компонента --> <child-component :ref="(el) => child = el"></child-component>
1
2
3
4
5
6
7
8Важное примечание о времени регистрации ref-ссылок: поскольку ref-ссылки создаются в результате функции отрисовки, нет возможности получить к ним доступ при начальной отрисовке — потому что их ещё не существует! Свойство
$refs
также нереактивно, поэтому не стоит использовать его в шаблонах для привязки данных.См. также: Ссылки на элементы шаблона
# is
- Ожидает:
string | Object (объект опций компонента)
Используется для динамических компонентов.
Например:
<!-- компонент меняется в соответствии с изменением currentView -->
<component :is="currentView"></component>
2
Подробное описание использования можно изучить по ссылкам ниже.