Жизненный цикл Vue

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

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

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

  1. Вызывается конструктор new Vue()

  2. Перед созданием объекта Vue вызывается метод beforeCreate()

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

  4. После создания объекта Vue вызывается метод created()

  5. Далее выполняется компиляция шаблона

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

  7. Элемент html, к которому прикреплен объект Vue, заменяется скомпилированным шаблоном

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

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

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

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

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

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

  10. При завершении работы приложения вызывается метод beforeDestroy()

  11. И в конце вызывается метод destroyed(). Объект Vue удалено из памяти, и больше с ним мы работать не можем.

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Жизненный цикл Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button v-on:click="message='Updated'">Update</button>
<button v-on:click="destroy">Destroy</button>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
	el: "#app",
	data:{
		message: 'Welcome to Vue.js'
	},
	methods:{
		destroy: function(){
			this.$destroy();
		}
	},
	beforeCreate: function(){
		console.log('beforeCreate()');
	},
	created: function(){
		console.log('created()');
	},
	beforeMount: function(){
		console.log('beforeMount()');
	},
	mounted: function(){
		console.log('mounted()');
	},
	beforeUpdate: function(){
		console.log('beforeUpdate()');
	},
	updated: function(){
		console.log('updated()');
	},
	beforeDestroy: function(){
		console.log('beforeDestroy()');
	},
	destroyed: function(){
		console.log('destroyed()');
	}
});
</script>
</body>
</html>
Управление жизненным циклом во Vue.js

При нажатии на кнопку Update выполняется обновление DOM, и вызываются методы beforeUpdate() и updated(). Причем при повторном нажатии эти методы не будут в данном случае вызываться, так как виртуальный DOM никак не изменится, то есть заголовок получит тот же самый текст Update. Соответственно реальный DOM также не будет обновляться.

При нажатии на кнопку Destroy будет вызван метод destroy, в котором будет выполняться метод this.$destroy(). То есть мы явным образом вызываем у объекта Vue его уничтожение. Затем вызываются методы beforeDestroy() и destroyed(). И после этого объект Vue удален из памяти, и работать с ним мы больше не сможем, даже при том, что на веб-странице сохраняется его html-разметка.

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

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