Vue.js

Внешний вид

Содержание

Composition 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()
      • наблюдатели
      • хуки пользовательских директив
      • хуки анимаций переходов

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

      Совет

      В продакшене 3-й аргумент (info) будет представлять собой сокращённый код вместо полной информационной строки. Сопоставление кода и строки можно найти в Руководстве по кодам ошибок.

      Вы можете изменить состояние компонента в 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, серверный рендерер будет ждать, пока он не разрешится, прежде чем приступить к рендерингу компонента.

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

  • Пример

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

const data = ref(null)

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

onMounted(async () => {
  if (!data.value) {
    // если при подключении данные равны null, это означает, что компонент
    // динамически отображается на клиенте. Выполните
    // выборку на стороне клиента.
    data.value = await fetchOnClient(/* ... */)
  }
})
</script>

  • См. также Рендеринг на стороне сервера

Исправить эту страницу на GitHub