Vue.js

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

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

Опції: Життєвий цикл ​

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

Щоб дізнатися про спільне використання хуків життєвого циклу, див. Гід - Хуки життєвого циклу

beforeCreate ​

Викликається під час ініціалізації екземпляра.

  • Тип

    ts
    interface ComponentOptions {
  beforeCreate?(this: ComponentPublicInstance): void
}

  • Подробиці

    Викликається негайно, коли екземпляр ініціалізується, після вирішення реквізитів, перед обробкою інших параметрів, таких як data() або computed.

    Зауважте, що хук setup() композиційного API викликається перед будь-якими хуками опційного API, навіть перед beforeCreate().

created ​

Викликається після того, як екземпляр завершив обробку всіх параметрів, пов'язаних зі станом.

  • Тип

    ts
    interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}

  • Подробиці

    Під час виклику цього хуку було налаштовано наступне: реактивні дані, обчислювані властивості, методи та спостерігачі. Однак етап монтування ще не розпочато, і властивість $el ще не буде доступною.

beforeMount ​

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

  • Тип

    ts
    interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

  • Подробиці

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

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

mounted ​

Викликається після монтування компонента.

  • Тип

    ts
    interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

  • Подробиці

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

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

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

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

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

beforeUpdate ​

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

  • Тип

    ts
    interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

  • Подробиці

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

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

updated ​

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

  • Тип

    ts
    interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

  • Подробиці

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

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

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

    УВАГА

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

beforeUnmount ​

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

  • Тип

    ts
    interface ComponentOptions {
  beforeUnmount?(this: ComponentPublicInstance): void
}

  • Подробиці

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

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

unmounted ​

Викликається після того, як компонент було демонтовано.

  • Тип

    ts
    interface ComponentOptions {
  unmounted?(this: ComponentPublicInstance): void
}

  • Подробиці

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

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

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

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

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

errorCaptured ​

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

  • Тип

    ts
    interface ComponentOptions {
  errorCaptured?(
    this: ComponentPublicInstance,
    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 для цієї помилки.

renderTracked ​

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

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

  • Тип

    ts
    interface ComponentOptions {
  renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

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

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

renderTriggered ​

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

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

  • Тип

    ts
    interface ComponentOptions {
  renderTriggered?(this: ComponentPublicInstance, 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>
}

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

activated ​

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

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

deactivated ​

Викликається після видалення екземпляра компонента з DOM як частини дерева, кешованого <KeepAlive>.

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

serverPrefetch ​

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

  • Тип

    ts
    interface ComponentOptions {
  serverPrefetch?(this: ComponentPublicInstance): Promise<any>
}

  • Подробиці

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

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

  • Приклад

    js
    export default {
  data() {
    return {
      data: null
    }
  },
  async serverPrefetch() {
    // відрендериний компонент як частина початкового запиту
    // отримання попередніх даних на сервері, оскільки це швидше, ніж на клієнті
    this.data = await fetchOnServer(/* ... */)
  },
  async mounted() {
    if (!this.data) {
      // якщо data є null під час монтування, це означає що компонент
      // динамічно рендериться на клієнті. Виконує
      // замість цього запит на стороні клієнта.
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

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

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