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

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>

• Також до вашої уваги:

  • Вбудовані спеціальні елементи - <component>
  • Динамічні компоненти