Vue sets up hook functions (listeners) for each state in its lifecycle. Each time a Vue instance is in a different life cycle, the corresponding function is invoked.
This article is shared by Huawei Cloud community “This article will guide you to understand the eight life cycle hook functions of Vue”, originally written by: Northern Lights night.
I. Quick Recognition concept:
We call the life cycle of an object from creation (new) to destruction (destory). Life cycle functions, on the other hand, are functions that are automatically executed at some point.
In official language, each Vue instance goes through a series of initialization procedures when it is created — for example, you need to set up data listeners, compile templates, mount the instance to the DOM, and update the DOM when the data changes. Functions called lifecycle hooks are also run along the way, giving users the opportunity to add their own code at different stages.
In simple terms, each Vue instance is created through a series of initialization processes: instance creation, template loading, template rendering, etc. Vue sets up hook functions (listeners) for each state in its lifecycle. Each time a Vue instance is in a different life cycle, the corresponding function is invoked.
Eight lifecycle hook functions:
Here is the life cycle chart from the official documentation, for those of you who are good at English:
Iii. Understanding based on code:
The basic code is shown below, followed by the following code steps to illustrate the life cycle function of an object from its creation to its destruction. Notice what the show function does.
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < script SRC =" https://unpkg.com/vue/dist/vue.js "> < / script > < / head > < body > {{information}} </div> <script type="text/javascript"> var vm = new vue ({el: '#app', data: {information: 'Aurora Borealis night. Function show(INF,obj){console.log(INF); function show(inf,obj){console.log(inf); console.log("------------------------------------------"); Console. log(' Get data from vue instance data :'); console.log(obj.information); console.log("------------------------------------------"); Console. log(' Mounted object, which is DOM: '); console.log(obj.$el); console.log("------------------------------------------"); Console. log(' DOM already mounted on page: '); console.log(document.getElementById('app').innerHTML); } </script>Copy the code1. BeforeCreate:
At this stage, the vUE instance is just created in memory, and data and methods are not initialized.
Add the beforeCreate hook function to the case:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') '}, beforeCreate: function(){// Pass this stage introduction with this,this is the vue instance show('vue instance before initialization ',this); }})Copy the codeSee the results:
As you can see, the vue instance has just been created in memory, and everything else is undefined.
2. Created:
At this stage, the vUE instance is created in memory and data and methods are available, but the template is not compiled.
Add an created hook function to the example:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') '}, created: function(){show('vue instance initialized ',this); }})Copy the codeThe results:
See? We already know what’s in data. Nothing else.
3. BeforeMount:
This stage completes the compilation of the template, but it has not yet been mounted to the page.
Add the hook function to the case:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') '}, beforeMount: function(){show(' before mounting ',this); }})Copy the codeThe results:
See, the object to mount is compiled, but the DOM tree of the page is not mounted, so the page is not displayed at this stage.
4. Mounted:
At this stage, the template is compiled, mounted, and the page is ready to display.
Add the hook function to the case:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') }, mounted: function(){show(' mounted ',this); }})Copy the codeThe results:
5.beforeUpdate:
This function is executed before the state update, at which point the state value of the data in data has been updated to the latest, but the data displayed on the page is still the original and the DOM tree has not been re-rendered.
Change the data in data first:
Vm. information = 'Night of the Southern Lights ';Copy the codeAdd the hook function to the case:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') '}, beforeUpdate: function(){show(' before updating ',this); }})Copy the codeThe results:
See, the data in the VUE instance has become the Night of the Aurora Australis. However, at this stage, the initial data displayed on the DOM node of the page is northern Lights Night.
6. Updated:
At this stage, the function is executed after the state update is completed. At this point, the state value of the data in data is up to date, the data displayed on the page is up to date, and the DOM node has been re-rendered.
Add the hook function to the case:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') '}, updated: function(){show(' after update ',this); }})Copy the codeSee the results:
Updated, all updated ~
7. BeforeDestroy:
The beforeDestroy phase is before the VUE instance is destroyed, which is, of course, still usable.
Destroy Vue instance:
vm.$destroy();
Copy the codeAdd the hook function to the case:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') '}, beforeDestroy: function() {show(' beforeDestroy ',this); }})Copy the codeSee the effect:
8. Destroyed:
This phase is called after the Vue instance is destroyed, at which point everything indicated by all instances is unbound, event listeners are removed, and subinstances are destroyed.
Add the hook function to the case:
Var vm = new Vue({el: '#app', data: {information: 'Aurora Borealis night') '}, destroyed: function() {show(' after ',this); }})Copy the codeThe results:
Click to follow, the first time to learn about Huawei cloud fresh technology ~