Що робить параметр immediate?

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

Параметр immediate у функції watch() змушує watcher виконати callback одразу при створенні, а не тільки при першій зміні значення, що спостерігається.

Простіше кажучи:

immediate: true запускає обробник одразу, щойно watcher було встановлено.

Без immediate watcher спрацьовує тільки при зміні значення.

Простий приклад

watch(
  count,
  (newVal, oldVal) => {
    console.log('watch спрацював', newVal, oldVal)
  },
  { immediate: true }
)

Якщо count = ref(5):

Спрацює одразу:

watch спрацював 5 undefined

Потім - при кожній зміні.

Приклад без immediate (стандартна поведінка)

watch(count, () => console.log('changed'))

Якщо користувач ще нічого не змінював:

callback НЕ виконається
watcher чекає першої зміни

Це буває незручно, наприклад, при завантаженні даних.

Коли використовувати immediate?

1. Щоб завантажити дані при ініціалізації

Найчастіший кейс:

watch(
  () => route.params.id,
  (id) => loadUser(id),
  { immediate: true }
)

Спрацює одразу, без потреби дублювати код у mounted().

2. Для синхронізації з localStorage

watch(
  form,
  () => localStorage.setItem('form', JSON.stringify(form)),
  { immediate: true, deep: true }
)

При ініціалізації - одразу збереже дані.

3. Для виконання коду, який має запуститися одразу і при змінах

Наприклад:

підписка на веб-сокет
ініціалізація фільтрів
первинна валідація

Важливі нюанси

1. При immediate oldValue = undefined

Оскільки watcher стартує вперше - попереднього значення немає.

2. Не завжди потрібен immediate

Якщо логіка має виконуватися тільки при зміні, immediate не потрібен.

3. Використовуйте разом з `deep`, якщо об'єкт вкладений

watch(settings, save, { immediate: true, deep: true })

Підсумок (ідеально для співбесіди)

immediate: true змушує watch() виконати callback одразу після встановлення watcher. Корисно для завантаження даних, первинної ініціалізації, синхронізації та випадків, коли ефект має виконатися одразу, а не чекати зміни значення.

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

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

Premium

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