В этом руководстве вы узнаете и получите представление о хуках жизненного цикла Vue.js. вы также получите глубокое понимание того, как компоненты создаются и уничтожаются за кулисами.
Перехватчики жизненного цикла являются отправной точкой практически для всех интерфейсных фреймворков, поэтому хорошее понимание того, когда ваши компоненты создаются, монтируются, обновляются и уничтожаются, необходимо для понимания реактивности библиотеки.
Разобраться в хуках жизненного цикла в Vue.js довольно просто. На диаграмме ниже показан полный жизненный цикл компонента Vue.js.
Посмотрите, как меняются хуки жизненного цикла на разных этапах компиляции шаблонов vue.
Согласно документации Vue.js каждый экземпляр Vue при создании проходит через серию шагов инициализации. - например, ему необходимо настроить наблюдение за данными, скомпилировать шаблон, подключить экземпляр к DOM и обновить DOM при изменении данных. Попутно он также выполняет функции, называемые перехватчиками жизненного цикла, что дает пользователям возможность добавлять свой собственный код на определенных этапах.
Созданные Vue хуки
Хук BeforeCreate
Ловушка beforeCreated является первой ловушкой на этапе инициализации, она запускается до создания экземпляра, поэтому в этом состоянии реактивность не устанавливается. Это означает, что мы не можем получить доступ к данным или обновить их. Если данные поступают из вашего внутреннего API, их вызов в ловушке beforeCreated вернет значение undefined. См. Пример.
<script>
export default {
beforeCreated(){
console.log(data);
//This will return undefined
}
}
</script>Созданный крючок
Хук created срабатывает при создании компонента, здесь у нас есть доступ к данным компонента и создается реактивность. Однако шаблоны и виртуальная модель DOM еще не смонтированы в этом хуке. См. Пример ниже:
<script> export default { data(){ return{ message: "I am learning Vue lifecycle hooks" } },computed:{ messageChange(){ console.log(`This will look up to ${this.message} for changes`); return this.messages } }, created(){ this.message = "now the message is changed"; console.log(`messageChange will be updated since reactivity is present`); } } </script>
Установленные крючки Vue
Крюк BeforeMount
Хук beforeMount запускается перед первоначальным рендерингом виртуальной DOM и компиляцией шаблонов или функций рендеринга. Не рекомендуется использовать этот хук во время рендеринга на стороне сервера, он не может быть вызван после рендеринга. См. Пример:
<script>
export default {
beforeMount(){
console.log(`${this.el} is about to be mount`);
}
</script>Навесной крюк
У монтируемого хука устанавливается полная реактивность, создаются шаблоны и визуализируется DOM (через. This. $ El).
Установленный крюк считается наиболее часто используемым крюком на протяжении всего жизненного цикла. Большинство людей используют его для получения данных для своего компонента (я рекомендую использовать Created Hook). См. Пример:
<template> <p>Text inside a component</p> </template><script> export default { mounted(){ console.log(this.$el.textContent); //This will return the text from the template } </script>
Хуки обновления Vue
Перехватчики обновления запускаются всякий раз, когда изменяется реактивное свойство, используемое вашим компонентом, или через ввод пользователя, вызывающий его повторную визуализацию. Эти хуки обновления позволяют подключиться к циклу наблюдения-вычисления-рендеринга для вашего компонента.
Вы можете использовать его, если хотите знать, когда вы повторно отрисовываете компонент. Чтобы настроить таргетинг на состояние реактивного компонента, пожалуйста, вычислите свойство или наблюдателей.
Хук BeforeUpdate
Хук beforeUpdate запускается перед повторной визуализацией компонента, он запускается при изменении данных в компоненте. Это хорошее место для отслеживания состояния реактивного компонента перед его визуализацией. См. Пример:
<script>
export default {
data(){
n: 1,
},
beforeUpdate(){
console.log(this.n) //sets the value of n to 300 after 1,500 seconds;
},
created(){
setTimeOut(() => {
this.n = 300
}, 1500);
}
</script>Обновленный хук
Обновленная ловушка вызывается после того, как изменение данных вызывает повторную визуализацию и исправление виртуальной DOM. DOM компонента будет обновлена при вызове этой ловушки, поэтому здесь вы можете выполнять операции, зависящие от DOM. Однако в большинстве случаев вам следует избегать изменения состояния внутри ловушки. Чтобы реагировать на изменения состояния, обычно лучше использовать вычисленное свойство или наблюдателя.
<template> <p ref="dom-element">{{name}}</p> </template><script> export default { data() { return { name: "Emmanuel Etukudo" } },updated() { // Track update on the DOM element. console.log(this.$refs['dom-element'].textContent === this.name) },created() { setTimeout(() => { this.name = "John Doe" }, 1000) } } </script>
Крюки разрушения
Перехватчики уничтожения используются для выполнения действий при уничтожении ваших компонентов, таких как удаление событий, связанных с компонентами. Они когда компоненты удаляются из DOM.
Крюк BeforeDestroy
Хук beforeDestroy срабатывает перед уничтожением экземпляра Vue. На этом этапе экземпляр все еще полностью работоспособен.
<script> export default { data() { return { accessToken: localStorage.getItem('accessToken'), } },beforeDestroy() { // Remove the token. localStorage.removeItem('accessToken'); }, } </script>
Разрушенный крюк
DestroyHook срабатывает после того, как экземпляр Vue был уничтожен. Когда этот хук вызывается, все директивы экземпляра Vue не связаны, все прослушиватели событий удалены, и все дочерние экземпляры Vue также были уничтожены.
<script>
export default {
destroyed() {
console.log(this) // Nothing is left to log
}
}
</script>Есть еще два крючка, которые не описаны в этой статье. Это хуки проверки активности: Активировать и Деактивировано. Их можно найти на веб-сайте документации Vue. Спасибо, что прочитали, оставьте свои комментарии, я хотел бы прочитать от вас.
