Жизненный цикл приложения Vue 3

Последнее обновление: 01.11.2020

В процессе своей работы приложение Vue 3 проходит через ряд этапов, которые составляют жизненный цикл приложения Vue 3. Кроме того, фреймворк Vue предоставляет ряд специальных методов, с помощью которых мы можем вызвать некоторые действия на различных этапах жизненного цикла приложения.

Весь жизненный цикл приложения Vue 3 можно описать следующим образом:

  1. Вызывается функция Vue.createApp() и метод mount(). Сначала происходит инициализация приложения Vue.

  2. Сразу после инициализации приложения, но до установки свойств, методов и обработчиков событий объектов приложения вызывается метод beforeCreate().

  3. Далее происходит создание объекта Vue, установка его свойств, обработчиков событий и прочих методов

  4. После создания объекта приложения Vue и установки всех свойств и методов вызывается метод created(). На этом этапе еще не произошло прикрепление объекта приложения Vue к элементу html веб-страницы.

  5. Далее выполняется компиляция шаблона - валидную разметку с кодом html, которая представляет приложение Vue и внутри которой приложение будет работать.

  6. Вызывается метод beforeMount().

  7. Элемент html, который передается в метод mount в Vue.createApp({}).mount(), заменяется скомпилированным шаблоном.

  8. Сразу после прикрепления приложения Vue к элементу html, вызывается метод mounted(), и после этого шаблон считается прикрепленным к DOM, и мы можем с ним работать

  9. Если в процессе работы мы обновляем данные приложения Vue, то происходит еще ряд событий:

    1. Данные изменяются

    2. Вызывается метод beforeUpdate()

    3. Производится повторный рендеринг DOM для его соответствия виртуальному DOM

    4. Вызывается метод updated(). DOM на веб-странице обновлен, и мы продолжаем работать с приложением Vue

  10. При откреплении объекта приложения Vue вызывается метод beforeUnmount()

  11. И после открепления приложения Vue от html-страницы вызывается метод unmounted().

Схематично жизненный цикл можно представить так:

Жизненный цикл приложения Vue.js

Для примера используем методы управления жизненным циклом:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<h3>Жизненный цикл Vue 3</h3>
<div id="app">
    <h2>{{message}}</h2>
	<button @click="message='Updated'">Update</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vueApp = Vue.createApp({
  data() {
    return {message: 'Welcome to Vue.js'}
  },
  methods:{
	  // методы-обработчики событий жизненного цикла
	  // помещаются вне параметра methods
	},
    beforeCreate(){
        console.log('beforeCreate()');
    },
    created(){
        console.log('created()');
    },
    beforeMount(){
        console.log('beforeMount()');
    },
    mounted(){
        console.log('mounted()');
    },
    beforeUpdate(){
        console.log('beforeUpdate()');
    },
    updated(){
        console.log('updated()');
    },
    beforeUnmount(){
        console.log('beforeUnmount()');
    },
    unmounted(){
        console.log('unmounted()');
    }
});
vueApp.mount('#app');
setTimeout(() => vueApp.unmount('#app'), 10000)
</script>
</body>
</html>

Прежде всего обратите внимание, что все методы, которые обрабатывают события жизненного цикла, помещаются вне параметра methods.

Для вызова метода unmount() у объкта приложения, применяется встроенная функция JavaScript setTimeout(), которая вызывает метод vueApp.unmount() через 10000 миллисекунд после загрузки страницы.

В итоге после загрузки страницы мы увидим в консоли браузера сообщения, что сработало то или иное событие жизненного цикла. А при нажатии на кнопку Update выполняется обновление DOM, и вызываются методы beforeUpdate() и updated().

Управление жизненным циклом и lifecycle hooks во Vue 3

А через 10 секунд после загрузки веб-страницы будет выполняться метод vueApp.unmount(), который отвяжет объект приложения Vue от элемента веб-страницы и приведет к вызову методов beforeUnmount() и unmonted(). И после этого объект приложения Vue будет откреплен от веб-страницы, и работать с ним мы больше не сможем.

Unmounted во Vue 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850