Чим директиви відрізняються від звичайних HTML-атрибутів?

VueJunior~1 хв читання

Директиви Vue і звичайні HTML-атрибути виглядають схоже (обидва - атрибути в розмітці), але працюють абсолютно по-різному. Ось чітке пояснення, яке добре звучить на співбесіді.

Головна відмінність

HTML-атрибути - це статичні властивості елемента.

Вони просто задають фіксоване значення: id, class, href, disabled, value тощо.

Директиви Vue - це динамічні інструкції.

Вони говорять фреймворку як оновлювати DOM залежно від стану даних.

Детальні відмінності

1. Директиви - реактивні, HTML-атрибути - ні

HTML-атрибут задає значення один раз:

javascript

<input value="Hello">

Якщо значення в JavaScript зміниться - HTML-атрибут не оновиться.

Vue-директива реагує на зміни даних:

javascript

<input :value="message">

javascript

message = 'New value' // DOM оновиться автоматично

2. Директиви виконують логіку, а не просто задають властивості

HTML-атрибут не може:

показувати/приховувати елемент умовно
рендерити списки
слухати події з реактивним контекстом
оновлюватися автоматично

Директиви можуть:

javascript

<div v-if="isLoggedIn">Ласкаво просимо!</div>
<button @click="logout">Вийти</button>
<li v-for="item in list">{{ item }}</li>

Це не просто атрибути - це інструкції шаблонного рушія Vue.

3. У директив є життєвий цикл і логіка роботи з DOM

Звичайні HTML-атрибути - просто текст.

Користувацька директива може виконувати JavaScript:

javascript

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

4. HTML-атрибути працюють у чистому HTML, директиви - тільки всередині Vue

Цей код валідний у звичайному HTML:

javascript

class="button"
disabled

Але директиви з v- працюють тільки у Vue-шаблоні:

javascript

v-if="show"
v-model="value"
v-for="item in list"

Якщо вставити такий код у звичайний HTML - це буде просто рядок, без логіки

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.