Вбудовані спеціальні атрибути
key
Спеціальний атрибут key
в основному використовується як підказка для віртуального алгоритму DOM Vue для ідентифікації vnodes під час порівняння нового списку вузлів зі старим списком.
Очікує:
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>
завжди буде замінюватися повністю, замість оновлення вмісту, а значить і анімація переходу буде запущена..See also: Гід - Рендеринг списків - підтримка стану за допомогою
key
ref
Позначає посилання шаблону.
Очікує:
string | Function
Подробиці
ref
використовується для реєстрації посилання на елемент або дочірній компонент.В опційному АРІ посилання буде зареєстровано в об'єкті
this.$refs
компонента:template<!-- зберігається як this.$refs.p --> <p ref="p">hello</p>
В композиційному АРІ посилання буде збережено в референції з відповідним іменем:
vue<script setup> import { ref } from 'vue' const p = ref() </script> <template> <p ref="p">hello</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>
Також до вашої уваги: