Learning about the lifecycle of Vue is a very important area, as it encompasses many aspects. Every Vue instance goes through a series of initialization processes when it is created, and this process is known as the Vue lifecycle.
Every 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 "lifecycle" of a component (the entire process from registration to destruction of a component). Sometimes, we need to execute certain code during a specific phase of the component's lifecycle. To facilitate this, Vue provides "lifecycle hooks" that allow users to add their own code at different stages.
However, before we dive into that, let's take a detailed look at the lifecycle of a component and what parts are completed or incomplete during each stage.
1. Component Lifecycle#
Let's start with a familiar diagram from the official Vue documentation that illustrates 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 setup.
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 in the beforeCreate hook, and it 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 event/watcher callbacks. However, the mounting phase has not started yet, so the $el property is not visible at this point.
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 from the HTML. However, it cannot access the DOM generated by mounting the template (e.g., li generated by v-for loop iterating over Vue.list).
3. beforeMount#
The beforeMount hook is called right before the initial render function (template) is called.
For example, the HTML generated by v-for has not been mounted to the page yet.
beforeMount: function () {
console.log('beforeMount:',document.getElementsByTagName('li').length);
},
The console prints beforeMount: 1.
4. mounted#
The el is replaced by the newly created vm.$el and is called after the instance is mounted to the DOM.
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 is mounted: 3. We can see that at this point, it has been mounted to the instance, and we can access the number of li elements.
5. beforeUpdate#
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#
Called after the virtual DOM is 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 (all data in Vue triggers this). If you want to perform a unified action for all data updates, you can use this hook. If you want to perform different actions for different data updates, you can use nextTick or watch to listen for changes.
updated: function () {
console.log('updated hook executed...');
console.log('updated:',this.message)
},
7. beforeDestroy#
Called right before the instance is destroyed. At this stage, the instance is still fully accessible.
8. destroyed#
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 functions are called when the Vue instance is destroyed.