Vue.js

Зовнішній вигляд

На цій сторінці

Композиційний API: Хуки життєвого циклу ​

Примітка щодо використання

Усі API, перелічені на цій сторінці, мають викликатися синхронно під час фази setup() компонента. Щоб отримати докладнішу інформацію, перегляньте Гід - Хуки життєвого циклу.

onMounted() ​

Реєструє функцію зворотного виклику, яка буде викликана після монтування компонента.

  • Тип

    ts
    function onMounted(callback: () => void): void

  • Подробиці

    Компонент вважається змонтованим після:

    • Усі його синхронні дочірні компоненти змонтовано (не включає асинхронні компоненти чи компоненти всередині <Suspense> дерев).

    • Його власне дерево DOM було створено та вставлено в батьківський контейнер. Зауважте, що це гарантує, що дерево DOM компонента знаходиться в документі, лише якщо кореневий контейнер застосунку також є в документі.

    Цей хук зазвичай використовується для виконання побічних ефектів, які потребують доступу до відрендереного DOM компонента, або для обмеження пов'язаного з DOM коду клієнта в застосунках з рендерингом на стороні серверу.

    Цей хук не викликається під час рендерингу на стороні серверу.

  • Приклад

    Доступ до елемента за допомогою посилання шаблону:

    vue
    <script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

onUpdated() ​

Реєструє функцію зворотного виклику, яка буде викликана після того, як компонент оновить своє дерево DOM через реактивну зміну стану.

  • Тип

    ts
    function onUpdated(callback: () => void): void

  • Подробиці

    Батьківський хук оновлення компонента викликається після того, як будуть оновленні його дочірні компоненти.

    Цей хук викликається після будь-якого оновлення DOM компонента, яке може бути викликано різними змінами стану, оскільки кілька змін стану можна об’єднати в один цикл візуалізації з міркувань продуктивності. Якщо вам потрібно отримати доступ до оновленої DOM після певної зміни стану, замість цього використовуйте nextTick().

    Цей хук не викликається під час рендерингу на стороні серверу.

    УВАГА

    Не змінюйте стан компонента в хуку оновлення - це, швидше за все, призведе до нескінченного циклу оновлення!

  • Приклад

    Доступ до оновленої DOM:

    vue
    <script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)

onUpdated(() => {
  // текстовий вміст має бути таким же, як і поточний `count.value`
  console.log(document.getElementById('count').textContent)
})
</script>

<template>
  <button id="count" @click="count++">{{ count }}</button>
</template>

onUnmounted() ​

Реєструє функцію зворотного виклику, яка буде викликана після демонтування компонента.

  • Тип

    ts
    function onUnmounted(callback: () => void): void

  • Подробиці

    Компонент вважається демонтованим після:

    • Усі дочірні компоненти було демонтовано.

    • Усі пов'язані з ним реактивні ефекти (ефект рендеренгу та обчислювання / спостерігачі, створені під час setup()) зупинено.

    Використовуйте цей хук, щоб очистити створені вручну побічні ефекти, такі як таймери, слухачі подій DOM або підключення до сервера.

    Цей хук не викликається під час рендерингу на стороні серверу.

  • Приклад

    vue
    <script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId
onMounted(() => {
  intervalId = setInterval(() => {
    // ...
  })
})

onUnmounted(() => clearInterval(intervalId))
</script>

onBeforeMount() ​

Реєструє хук, який потрібно викликати безпосередньо перед монтуванням компонента.

  • Тип

    ts
    function onBeforeMount(callback: () => void): void

  • Подробиці

    Коли цей хук викликається, компонент вже завершив налаштування свого реактивного стану, але вузли DOM ще не створено. Він збирається вперше виконати рендеринг DOM.

    Цей хук не викликається під час рендерингу на стороні серверу.

onBeforeUpdate() ​

Реєструє хук, який буде викликаний безпосередньо перед тим, як компонент збирається оновити своє дерево DOM через реактивну зміну стану.

  • Тип

    ts
    function onBeforeUpdate(callback: () => void): void

  • Подробиці

    Цей хук можна використовувати, щоб отримати доступ до стану DOM до того, як Vue оновить DOM. Також безпечно змінювати стан компонента всередині цього хука.

    Цей хук не викликається під час рендерингу на стороні серверу.

onBeforeUnmount() ​

Реєструє хук, який буде викликаний безпосередньо перед тим, як екземпляр компонента буде демонтовано.

  • Тип

    ts
    function onBeforeUnmount(callback: () => void): void

  • Подробиці

    Коли цей хук викликається, екземпляр компонента все ще має повну функціональність.

    Цей хук не викликається під час рендерингу на стороні серверу.

onErrorCaptured() ​

Реєструє хук, який буде викликаний, коли виявлено помилку, що поширюється від компонента-нащадка.

  • Тип

    ts
    function onErrorCaptured(callback: ErrorCapturedHook): void

type ErrorCapturedHook = (
  err: unknown,
  instance: ComponentPublicInstance | null,
  info: string
) => boolean | void

  • Подробиці

    Помилки можна отримати з таких джерел:

    • Рендери компонента
    • Обробники подій
    • Хуки життєвого циклу
    • функція setup()
    • Спостерігачі
    • Користувацькі хуки директив
    • Перехідні хуки

    Хук отримує три аргументи: помилку, екземпляр компонента, який викликав помилку, та інформаційний рядок, що визначає тип джерела помилки.

    Ви можете змінити стан компонента в errorCaptured(), щоб показати стан помилки для користувача. Однак важливо, щоб стан помилки не рендерив вихідний вміст, який спричинив помилку; інакше компонент потрапить у нескінченний цикл рендерингу.

    Хук може повернути false, щоб зупинити подальше поширення помилки. Подробиці про поширення помилки див. нижче.

    Правила розповсюдження помилок

    • За замовчуванням усі помилки все ще надсилаються до app.config.errorHandler на рівні застосунку, якщо він визначений, щоб про ці помилки все одно можна було повідомити аналітичні служби в одному місці.

    • Якщо в ланцюжку успадкування або батьківському ланцюжку компонента існує кілька хуків errorCaptured, усі вони будуть викликані при одній помилці в порядку знизу вгору. Це схоже на механізм спливання рідних подій DOM.

    • Якщо хук errorCaptured сам видає помилку, то ця помилка, і оригінальна захоплена помилка надсилаються до app.config.errorHandler.

    • Хук errorCaptured може повертати false, щоб запобігти подальшому поширенню помилки. По суті, це означає, що «цю помилку було оброблено, і її слід ігнорувати». Це запобігатиме виклику будь-яких додаткових хуків errorCaptured або app.config.errorHandler для цієї помилки.

onRenderTracked() ​

Реєструє хук налагодження, який викликається, коли реактивна залежність відстежується ефектом рендерингу компонента.

Цей хук працює лише в режимі розробки й не викликається під час рендерингу на стороні серверу.

  • Тип

    ts
    function onRenderTracked(callback: DebuggerHook): void

type DebuggerHook = (e: DebuggerEvent) => void

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}

  • Також до вашої уваги: Реактивність поглиблено

onRenderTriggered() ​

Реєструє хук налагодження, який викликається, коли реактивна залежність ініціює повторний запуск ефекту рендерингу компонента.

**Цей хук працює лише в режимі розробки й не викликається під час рендерингу на стороні серверу.

  • Тип

    ts
    function onRenderTriggered(callback: DebuggerHook): void

type DebuggerHook = (e: DebuggerEvent) => void

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}

  • Також до вашої уваги: Реактивність поглиблено

onActivated() ​

Реєструє функцію зворотного виклику, яка буде викликана після того, як екземпляр компонента буде вставлено в DOM як частину дерева, кешованого <KeepAlive>.

Цей хук не викликається під час рендерингу на стороні серверу.

onDeactivated() ​

Реєструє функцію зворотного виклику, яка буде викликана після видалення екземпляра компонента з DOM як частини дерева, кешованого <KeepAlive>.

Цей хук не викликається під час рендерингу на стороні серверу.

onServerPrefetch() ​

Реєструє асинхронну функцію, яка буде викликана перед рендерингом екземпляра компонента на сервері.

  • Тип

    ts
    function onServerPrefetch(callback: () => Promise<any>): void

  • Подробиці

    Якщо функція зворотного виклику повертає Promise, серверний рендерер чекатиме, поки Promise буде вирішено, перед рендерингом компонента.

    Цей хук викликається лише під час рендерингу на стороні сервера. Його можна використовувати для отримання даних лише на сервері.

  • Приклад

    vue
    <script setup>
import { ref, onServerPrefetch, onMounted } from 'vue'

const data = ref(null)

onServerPrefetch(async () => {
  // відрендериний компонент як частина початкового запиту
  // отримання попередніх даних на сервері, оскільки це швидше, ніж на клієнті
  data.value = await fetchOnServer(/* ... */)
})

onMounted(async () => {
  if (!data.value) {
    // якщо data є null під час монтування, це означає що компонент
    // динамічно рендериться на клієнті. Виконує
    // замість цього запит на стороні клієнта.
    data.value = await fetchOnClient(/* ... */)
  }
})
</script>

  • Також до вашої уваги: Застосунок з рендерингом на стороні серверу

Редагувати цю сторінку на GitHub