Vue.js

Оформление

Оглавление

Composition API: Хуки жизненного цикла ​

Примечание по использованию

Все API, перечисленные на этой странице, должны вызываться синхронно на этапе setup() компонента. Подробнее см. в главе Хуки жизненного цикла.

onMounted() ​

Регистрирует обратный вызов, который будет вызван после установки компонента.

  • Тип

    ts
    function onMounted(callback: () => void, target?: ComponentInternalInstance | null): void

  • Подробности

    Компонент считается смонтированным после того, как:

    • Все его синхронные дочерние компоненты были смонтированы (не включает асинхронные компоненты или компоненты внутри деревьев <Suspense>).

    • Его собственное дерево DOM было создано и вставлено в родительский контейнер. Обратите внимание, что это гарантирует, что DOM-дерево компонента находится в документе, только если корневой контейнер приложения также находится в документе.

    Этот хук обычно используется для выполнения побочных эффектов, требующих доступа к отрисовке DOM компонента, или для ограничения кода, связанного с DOM, на клиенте в приложении SSR.

    Этот хук не вызывается во время рендеринга на стороне сервера.

  • Пример

    Доступ к элементу через реактивную ссылку:

    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, target?: ComponentInternalInstance | null): 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, target?: ComponentInternalInstance | null): 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, target?: ComponentInternalInstance | null): void

  • Подробности

    Когда вызывается этот хук, компонент завершил установку своего реактивного состояния, но ни один из узлов DOM ещё не был создан. Сейчас он впервые выполнит свой эффект отрисовки DOM.

    Этот хук не вызывается во время рендеринга на стороне сервера.

onBeforeUpdate() ​

Регистрирует хук для вызова непосредственно перед тем, как компонент собирается обновить свое дерево DOM из-за реактивного изменения состояния.

  • Тип

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

  • Подробности

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

    Этот хук не вызывается во время рендеринга на стороне сервера.

onBeforeUnmount() ​

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

  • Тип

    ts
    function onBeforeUnmount(callback: () => void, target?: ComponentInternalInstance | null): void

  • Подробности

    Когда вызывается этот хук, экземпляр компонента остается полностью функциональным.

    Этот хук не вызывается во время рендеринга на стороне сервера.

onErrorCaptured() ​

Регистрирует хук, который будет вызван, когда будет перехвачена ошибка, распространяющаяся от компонента-потомка.

  • Тип

    ts
    function onErrorCaptured(callback: ErrorCapturedHook): void

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

  • Подробности

    Ошибки могут быть получены из следующих источников:

    • Отрисовщики компонентов
    • Обработчики событий
    • Хуки жизненного цикла
    • Функция setup()
    • Наблюдатели
    • Хуки для пользовательских директив
    • Хуки переходов

    Хук получает три аргумента: ошибку, экземпляр компонента, вызвавшего ошибку, и информационную строку, указывающую тип источника ошибки.

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

    Хук может вернуть 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