Как работают хуки жизненного цикла в Vue.js
Development, Java | Комментировать запись
Хуки жизненного цикла позволяют узнать, как устроена внутренняя работа библиотек, которые вы используете. С их помощью вы можете определить, что компонент был создан, добавлен в DOM, обновлен или уничтожен.
Вот официальной документации Vue.js есть диаграмма, которая отражает жизненный цикл экземпляра Vue.js.
Эта статья расскажет вам, как работают хуки создания, установки, обновления и уничтожения компонентов Vue.js.
Хуки создания, или хуки инициализации
Хуки создания – это самые первые хуки, которые запускаются в компоненте. Они позволяют выполнять действия еще до того, как этот компонент будет добавлен в DOM. В отличие от других хуков, хуки создания запускаются во время рендеринга на стороне сервера.
Хуки создания нужно использовать, если, например, вам нужно настроить что-то в своем компоненте во время рендеринга как на стороне клиента, так и на стороне сервера.
Внутри хуков создания нет доступа к DOM или целевому элементу монтирования (this.$el).
Хук beforeCreate
Хук beforeCreate запускается во время инициализации компонента. В этот момент события еще не настроены:
ExampleComponent.vue
<script>
export default {
beforeCreate() {
console.log('At this point, events and lifecycle have been initialized.')
}
}
</script>
Когда запускается хук beforeCreate, этот пример кода выведет на экран сообщение:
At this point, events and lifecycle have been initialized.
Хук created
Доступ к реактивным данным и событиям можно получить при помощи хука created. Шаблоны и виртуальный DOM еще не смонтированы и не проанализированы.
ExampleComponent.vue
<template>
<div ref="example-element">{{ propertyComputed }}</div>
</template>
<script>
export default {
data() {
return {
property: 'Example property.'
}
},
computed: {
propertyComputed() {
return this.property
}
},
created() {
console.log('At this point, this.property is now reactive and propertyComputed will update.')
this.property = 'Example property updated.'
}
}
</script>
Этот пример кода будет хранить Example property в качестве property. При запуске хука created код вернет сообщение:
At this point, this.property is now reactive and propertyComputed will update.
Значение property изменится на Example property updated.
Позже в жизненном цикле {{ propertyComputed }} появится как Example property updated (а не Example property).
Итак, мы рассмотрели пару примеров хуков создания. Давайте перейдем к следующему виду хуков.
Хуки монтирования, или вставки DOM
Хуки монтирования используются чаще всего. Они позволяют получить непосредственный доступ к компоненту до и после первого рендеринга. Однако они не применяются во время рендеринга на стороне сервера.
Используйте хуки монтирования, если вам нужно получить доступ или изменить DOM вашего компонента сразу перед или после начального рендеринга.
Примечание: Не используйте хуки монтирования, если вам нужно получить данные вашего компонента при инициализации. Вместо этого используйте created (или created и activated для компонентов keep-alive), особенно, если эти данные вам нужны во время рендеринга на серверной стороне.
Хук beforeMount
Хук beforeMount запускается сразу перед начальным рендерингом и после того, как шаблон или функции рендеринга были скомпилированы:
ExampleComponent.vue
<script>
export default {
beforeMount() {
console.log(`At this point, vm.$el has not been created yet.`)
}
}
</script>
Когда beforeMount запускается, этот фрагмент кода выдает сообщение:
At this point, vm.$el has not been created yet.
Хук mounted
Хук mounted дает вам полный доступ к реактивному компоненту, шаблонам и визуальной модели DOM (через this.$el).
Используйте mounted для внесения изменений в DOM, особенно при интеграции библиотек, не относящихся к Vue:
ExampleComponent.vue
<template>
<div ref="example-element">Example component.</div>
</template>
<script>
export default {
mounted() {
console.log(`At this point, vm.$el has been created and el has been replaced.`);
console.log(this.$el.textContent) // Example component.
}
}
</script>
Когда запустится хук mounted, этот фрагмент кода выведет сообщение:
At this point, vm.$el has been created and el has been replaced.
А также такое сообщение:
Example content. (this.$el.textContent)
В этом разделе мы рассмотрели варианты использования хуков монтирования.
Хуки обновления, или повторного рендеринга
Хуки обновления вызываются при каждом изменении реактивного свойства, которое использует ваш компонент, или в том случае, если что-то еще повторно его визуализирует. Такие хуки позволяют подключиться к циклу watch-compute-render вашего компонента.
Хуки обновления нужны вам, если вы хотите знать, когда компонент повторно визуализируется – это может быть полезно при отладке или профилировании.
Не используйте хуки обновления, если хотите узнать, когда изменяется реактивное свойство компонента. Вместо этого используйте вычисляемые свойства или слежение.
Хук beforeUpdate
Хук beforeUpdate запускается после того, как данные в компоненте изменяются и начинается цикл обновления, сразу перед тем, как изменения попадут в DOM и он будет повторно визуализирован.
beforeUpdate полезен, если вам нужно узнать новое состояние каких-либо реактивных данных в компоненте до того, как он будет фактически визуализирован:
ExampleComponent.vue
<template>
<div ref="example-element">{{counter}}</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
created() {
setInterval(() => {
this.counter++
}, 1000)
},
beforeUpdate() {
console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
// Logs the counter value every second, before the DOM updates.
console.log(this.counter)
}
}
</script>
Во-первых, этот фрагмент кода сохранит counter как 0. Когда запустится хук created, он будет увеличивать значение счетчика каждые 1000 мс. Когда запустится хук beforeUpdate, этот фрагмент кода выдаст сообщение:
At this point, Virtual DOM has not re-rendered or patched yet.
И зарегистрирует значение счетчика.
Хук updated
Хук updated запускается после изменения данных в компоненте и повторного рендеринга DOM.
Используйте его, если вам нужно получить доступ к DOM сразу после изменения свойства:
ExampleComponent.vue
<template>
<div ref="example-element">{{counter}}</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
created() {
setInterval(() => {
this.counter++
}, 1000)
},
updated() {
console.log(`At this point, Virtual DOM has re-rendered and patched.`)
// Fired every second, should always be true
console.log(+this.$refs['example-element'].textContent === this.counter)
}
}
</script>
Для начала этот фрагмент сохранит counter как 0. Когда запустится хук created, он будет увеличивать значение счетчика каждые 1000 мс. Когда запустится хук updated, этот фрагмент выдаст сообщение:
At this point, Virtual DOM has re-rendered and patched.
а также зарегистрирует логическое значение true, поскольку отображаемое и текущее значение равны.
Теперь, когда вы познакомились с этим видом хуков, пора переходить к следующем виду.
Хуки разрушения, или уничтожения
Этот вид хуков позволяют выполнять ряд действий при уничтожении компонента: они проводят очистку, отправляют аналитические данные и т.п. Они срабатывают, когда компонент разрушается и удаляется из DOM.
Хук beforeDestroy
beforeDestroy запускается прямо перед разрушением компонента. На этом этапе компонент останется полностью рабочим.
Используйте хук beforeDestroy, если вам нужно очистить события или реактивные подписки:
ExampleComponent.vue
<script>
export default {
data() {
return {
exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
}
},
beforeDestroy() {
console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
// Perform the teardown procedure for exampleLeakyProperty.
// (In this case, effectively nothing)
this.exampleLeakyProperty = null
delete this.exampleLeakyProperty
}
}
</script>
Сначала данный фрагмент будет хранить свойство exampleLeakyProperty. Когда хук beforeDestroy запускается, этот код регистрирует сообщение:
At this point, watchers, child components, and event listeners have not been torn down yet.
И удаляет exampleLeakyProperty.
Хук destroyed
Пока вы дойдете до хука destroyed, в вашем компоненте не останется практически ничего. Все, что ранее было привязано к этому компоненту, к этому моменту будет уже уничтожено.
Используйте хук destroy, если вам нужно выполнить последнюю быструю очистку или сообщить удаленному серверу, что компонент уничтожен:
ExampleComponent.vue
<script>
import ExampleAnalyticsService from './example-analytics-service'
export default {
destroyed() {
console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
console.log(this)
ExampleAnalyticsService.informService('Component destroyed.')
}
}
</script>
Сначала этот фрагмент импортирует ExampleAnalyticsService. Когда запускается перехватчик beforeDestroy, этот фрагмент будет записывать сообщение. На этом этапе наблюдатели, дочерние компоненты и прослушиватели событий отключены. Остаток компонента будет записан на консоль, а ExampleAnalyticsService будет передано сообщение Component уничтожен ..
На этом вы завершили общий обзор хуков жизненного цикла Vue.js.
Другие хуки жизненного цикла
В Vue.js есть еще два хука, activated and deactivated, необходимые для компонентов keep-alive. К сожалению, подробное описание этих хуков выходит за рамки данной статьи.
Если вкратце, то они позволяют вам определять, когда включается или выключается компонент, заключенный в тег <keep-alive></keep-alive>. Вы можете использовать их для извлечения данных для компонента или обработки изменений состояния; при этом они будут вести себя как created и beforeDestroy, но не требуют полной перестройки компонента.
Заключение
В этом руководстве мы обсудили множество хуков жизненного цикла экземпляра Vue.js. Мы поговорили о хуках создания, монтирования, обновления и разрушения, а также рассмотрели различные примеры их практического применения.
Читайте также: Введение в Vuex: управление состоянием Vue.js
Tags: DOM, Javascript, Vue.js