Learning about the lifecycle is a very important aspect of Vue, as it encompasses many things. Each Vue instance goes through a series of initialization processes when it is created, and this process is known as the Vue lifecycle.
Each Vue instance goes through a series of initialization processes when it is created, such as setting up data observation, compiling templates, mounting the instance to the DOM, and updating the DOM when data changes. We refer to this series of processes as the component's lifecycle (the entire process from registration to destruction of the component). Sometimes, we need to execute certain code during a specific phase of the component's lifecycle. To facilitate this, Vue provides lifecycle hooks, which allow users to add their own code at different stages.
However, before we delve into that, let's provide a detailed introduction to the component's lifecycle and the completed and incomplete parts of each stage.
1. Component Lifecycle#
Let's start with a familiar diagram from the official documentation that explains the lifecycle.
From the diagram, we can see that Vue provides 8 lifecycle hooks, which are:
- beforeCreate: Before creation
- created: After creation
- beforeMount: Before mounting
- mounted: After mounting
- beforeUpdate: Before update
- updated: After update
- beforeDestroy: Before destruction
- destroyed: After destruction
1. beforeCreate#
The beforeCreate hook is called after the Vue instance is created but before data observation and event/watcher configuration.
In the example above, we call Vue's data and method in the beforeCreate hook. Let's see the result:
As we can see, the data and methods in Vue are not accessible at this point, and this hook is executed before the watcher.
2. created#
The created hook is called after the instance has been created. At this stage, the instance has completed the following configurations: data observation, computation of properties and methods, and watch/event callbacks. However, the mounting phase has not yet started, so the $el property is not visible.
Main Applications: Accessing data, calling methods, calling asynchronous functions
Let's take a look at the console output:
We can see that the created hook can access Vue's data, call Vue methods, and retrieve the DOM directly loaded on the HTML. However, it cannot access the DOM generated by mounting the template (e.g., using v-for to iterate over Vue.list and generate li).
3. beforeMount#
The beforeMount hook is called before the mounting begins, and the related render function (template) is called for the first time.
For example, the HTML generated by v-for has not yet been mounted on the page.
beforeMount: function () {
console.log('beforeMount:',document.getElementsByTagName('li').length);
},
The console will print beforeMount: 1.
4. mounted#
The mounted hook is called after el is replaced with the newly created vm.$el and mounted onto the instance.
DOM rendering with initial values, such as our initial data list, can only be accessed here.
mounted: function () {
console.log('mounted:',document.getElementsByTagName('li').length);
},
The result will be mounted: 3. We can see that at this point, it has been mounted onto the instance, and we can access the number of li elements.
5. beforeUpdate#
The beforeUpdate hook is called when data is updated, before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional re-rendering.
This function is triggered whenever we change any data in Vue.
beforeUpdate: function () {
console.log('beforeUpdate hook executed.');
console.log('beforeUpdate:'+this.message);
},
6. updated#
The updated hook is called after the virtual DOM has been re-rendered and patched due to data changes.
When this hook is called, the component's DOM has already been updated, so you can perform DOM-dependent operations. However, in most cases, you should avoid changing the state during this period, as it may cause an infinite update loop.
This hook is not called during server-side rendering.
It is triggered whenever data is updated in Vue (any data update in Vue triggers this hook). If you want to perform a unified operation on data updates, you can use this hook. If you want to perform different operations on different data updates, you can use nextTick or watch for monitoring.
updated: function () {
console.log('updated hook executed...');
console.log('updated:',this.message);
},
7. beforeDestroy#
The beforeDestroy hook is called before the instance is destroyed. At this stage, the instance is still fully available.
8. destroyed#
The destroyed hook is called after the Vue instance is destroyed. After this hook is called, everything associated with the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.
Result
As we can see, the beforeDestroy and destroyed hooks are called when the Vue instance is destroyed.