# Хуки жизненного цикла
Примечание
Все хуки жизненного цикла автоматически привязывают свой контекст this
к экземпляру, поэтому есть доступ к локальному состоянию, вычисляемым свойствам и методам. Поэтому нельзя использовать стрелочные функции при определении хука жизненного цикла (например, created: () => this.fetchTodos()
). Причина в том, что стрелочные функции привязываются к родительскому контексту, поэтому this
не будет экземпляром компонента и this.fetchTodos
будет неопределён.
# beforeCreate
Тип:
Function
Подробности:
Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.
См. также: Диаграмма жизненного цикла
# created
Тип:
Function
Подробности:
Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил: наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство
$el
на данный момент недоступно.См. также: Диаграмма жизненного цикла
# beforeMount
Тип:
Function
Подробности:
Вызывается непосредственно перед начало монтирования: функция
render
будет вызываться в первый раз.Не вызывается при отрисовке на стороне сервера.
См. также: Диаграмма жизненного цикла
# mounted
Тип:
Function
Подробности:
Вызывается после монтирования экземпляра, где элемент, переданный в
app.mount
заменяется вновь созданнымvm.$el
. Если корневой экземпляр примонтирован на элемент документа, тоvm.$el
также будет элементом документа при вызовеmounted
.Обратите внимание, что
mounted
не гарантирует, что все дочерние компоненты будут уже примонтированы. Если необходимо подождать пока не будут отрисованы и все дочерние, то можно воспользоваться vm.$nextTick внутриmounted
:mounted() { this.$nextTick(function () { // Код, который будет запущен только после // отрисовки всех представлений }) }
1
2
3
4
5
6Не вызывается при отрисовке на стороне сервера.
См. также: Диаграмма жизненного цикла
# beforeUpdate
Тип:
Function
Подробности:
Вызывается при изменении данных, перед обновлением DOM. Это удобное место для получения доступа к существующему DOM перед обновлением, например, чтобы вручную удалить добавленные прослушиватели событий.
Не вызывается при отрисовке на стороне сервера, потому что на стороне сервера выполняется только первоначальная отрисовка.
См. также: Диаграмма жизненного цикла
# updated
Тип:
Function
Подробности:
Вызывается после того, как обновится виртуальный DOM из-за изменений данных.
DOM компонента будет уже обновлён к моменту вызова этого хука, поэтому здесь можно выполнять операции связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом хуке. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью методов-наблюдателей.
Обратите внимание, что
updated
не гарантирует, что все дочерние компонента также были переотрисованы. Если необходимо подождать пока все не будут повторно отрисованы, можно воспользоваться vm.$nextTick внутриupdated
:updated() { this.$nextTick(function () { // Код, который будет запущен только после // переотрисовки всех представлений }) }
1
2
3
4
5
6Не вызывается при отрисовке на стороне сервера.
См. также: Диаграмма жизненного цикла
# activated
Тип:
Function
Подробности:
Вызывается при активации компонента внутри
<keep-alive>
.Не вызывается при отрисовке на стороне сервера.
См. также:
# deactivated
Тип:
Function
Подробности:
Вызывается после деактивации компонента внутри
<keep-alive>
.Не вызывается при отрисовке на стороне сервера.
См. также:
# beforeUnmount
Тип:
Function
Подробности:
Вызывается перед демонтированием экземпляра компонента. На этом этапе экземпляр компонента всё ещё полностью работоспособен.
Не вызывается при отрисовке на стороне сервера.
См. также: Диаграмма жизненного цикла
# unmounted
Тип:
Function
Подробности:
Вызывается после того, как экземпляр компонента размонтирован. Когда этот хук вызван, все директивы экземпляра компонента уже отвязаны, все прослушиватели событий удалены и все дочерние экземпляры компонентов размонтированы.
Не вызывается при отрисовке на стороне сервера.
См. также: Диаграмма жизненного цикла
# errorCaptured
Тип:
(err: Error, instance: Component, info: string) => ?boolean
Подробности:
Вызывается, когда фиксируется ошибка из любого дочернего компонента. Хук получает три аргумента: ошибку, экземпляр компонента, в котором вызвана ошибка, и строку с информацией где была зафиксирована ошибка. Хук может возвращать
false
, чтобы остановить дальнейшее распространение ошибки.Совет
В этом хуке можно изменять состояние компонента. Однако, важно иметь в шаблоне или render-функции условия, которые оборачивают и отделяют другое содержимое при обнаружении ошибки; иначе компонент может попасть в бесконечный цикл перерисовки.
Правила распространения ошибок
По умолчанию все ошибки по-прежнему отправляются в глобальный обработчик
config.errorHandler
, если он был объявлен, поэтому эти ошибки всё равно можно например отправлять в сервис по сбору аналитики из одного места в коде.Если существует несколько хуков
errorCaptured
в цепочке наследования компонента или родительской цепочке, то все они будут вызваны с этой же ошибкой.Если сам хук
errorCaptured
выбрасывает ошибку, то обе ошибки (зафиксированная и выброшенная хуком) отправятся в глобальный обработчикconfig.errorHandler
.Хук
errorCaptured
может возвращатьfalse
для предотвращения дальнейшего распространения ошибки. По существу это значит — «эта ошибка была обработана и её следует игнорировать», что предотвратит вызов других хуковerrorCaptured
или глобальногоconfig.errorHandler
для этой ошибки.
# renderTracked
Тип:
(e: DebuggerEvent) => void
Подробности:
Вызывается при отслеживании перерисовки виртуального DOM. Хук получает в качестве аргумента
debugger event
. Это событие сообщает, какая операция была отслежена в компоненте и целевой объект, а также ключ этой операции.Использование:
<div id="app"> <button v-on:click="addToCart">Добавить в корзину</button> <p>Корзина({{ cart }})</p> </div>
1
2
3
4const app = createApp({ data() { return { cart: 0 } }, renderTracked({ key, target, type }) { console.log({ key, target, type }) /* Будет выведено, когда компонент был отрисован в первый раз: { key: "cart", target: { cart: 0 }, type: "get" } */ }, methods: { addToCart() { this.cart += 1 } } }) app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# renderTriggered
Тип:
(e: DebuggerEvent) => void
Подробности:
Вызывается при срабатывании перерисовки виртуального DOM. Подобно
renderTracked
в качестве аргумента получаетdebugger event
. Это событие сообщает, какая операция вызвала перерисовку, а также целевой объект и ключ этой операции.Использование:
<div id="app"> <button v-on:click="addToCart">Добавить в корзину</button> <p>Корзина({{ cart }})</p> </div>
1
2
3
4const app = createApp({ data() { return { cart: 0 } }, renderTriggered({ key, target, type }) { console.log({ key, target, type }) }, methods: { addToCart() { this.cart += 1 /* Это приведёт к вызову renderTriggered { key: "cart", target: { cart: 1 }, type: "set" } */ } } }) app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
← DOM Доступные ресурсы →