“You don’t have to understand everything right away, but as you learn and use it, it becomes more and more valuable.” Now that you’ve encountered it in the project, take a good look at the Vue lifecycle and review it later when you need it.

What is the Vue life cycle?

Each Vue instance goes through a series of initialization procedures when it is created. For example, create data from the start, initialize data, compile templates, mount Dom, update Dom as data changes, unload, and so on. We call this sequence of processes the Vue lifecycle. Vue instance is the process from creation to destruction. There are also some functions called lifecycle hooks that run along the way, which give users the opportunity to add their own code at different stages, using each hook to complete our business code.

Don’t say anything. Let’s do something dry

This is the annotation map of the Vue life cycle on the official website. I saw the picture on the Internet, and I think the annotation is very nice. I suggest that you carefully read the picture step by step, and then save the picture by yourself quietly.

I believe it’s easier for programmers to understand code than words

Let’s illustrate hook by hook with reference to the content labeled above.

1.beforeCreate

Hook events that are executed after the instance is initialized but before the instance is created. Here’s an example:

<body>
<div id="root"> {{test}}</div>
<script type="text/javascript">
	const vm = new Vue({
		el: '#root',
		data: {
			test: 'The King of Heaven covers the Tiger.'
		},
		beforeCreate() {
			console.log('beforeCreate hook event: ');
			console.log(this.$data);
			console.log(this.$el);
		}
	})
</script>
</body>
Copy the code

The result is:

A small summary

2.created

The hook that executes after the instance is created was console again in the previous code example.

<body>
<div id="root"> {{test}}</div>
<script type="text/javascript">
	const vm = new Vue({
		el: '#root',
		data: {
			test: 'The King of Heaven covers the Tiger.'
		},
		created() {
			console.log('Created hook event:');
			console.log(this.$data);
			console.log(this.$el);
		}
	})
</script>
</body>
Copy the code

The result is:

A small summary

3.beforeMount

The hook that fires when the compiled HTML is mounted into the corresponding virtual DOM and the page has no content. This phase reads: about to mount let’s print $el at this time

beforeMount() {
			console.log('beforeMount hook event: ');
			console.log(this.$el);
		}
Copy the code

The result is:

A small summary


4.mounted

The event hook function that executes after the compiled HTML is mounted to the page. $el $el $el $el $el

mounted() {
			console.log('Mounted hook:');
			console.log(this.$el);
		}
Copy the code

The result is:



A small summary


5.beforeUpdate

Summary: Vue updates the render view automatically when modifying the data of a Vue instance. In this process, Vue provides beforeUpdate hooks that trigger the hook before updating the render view when we detect that we need to modify the data.

6.updated

Summary: This stage is after the render view is updated, and then the content on the view is read again, which is the latest content. PS: 1. This hook is not called during server-side rendering. 2. You should avoid changing the state during this period, as this can lead to an infinite update loop.

7.beforeDestroy

Summary: Calling the instance’s destroy() method destroys the current component, firing the beforeDestroy hook before destruction.

8.destroyed

Summary: After successful destruction, a Destroyed hook is triggered that removes the instance’s association with other instances, unhooks everything indicated by the Vue instance, all event listeners are removed, and all subinstances are destroyed.

In the last

There are three lifecycle hooks left unlisted: Activated, Deactivated, and errorCaptured. These three we met their own understanding, so for the time being.