1. What is the life cycle A Vue instance has a complete life cycle, which includes a series of processes such as creation, data initialization, template compilation, Throughout the life cycle of Vue, it provides a series of events that allow us to register 2. The life cycle of VueLife cycle function, also called hook function (life cycle hook === life cycle function === life cycle event) The life cycle functions in Vue usually appear in pairs. So we compare them in pairs and see the difference between them. 10 life cycle functions to remember! Specific use! 3. Lifecycle hook function
I took a picture from the official website: beforeCreate --- "before creation" of the Vue instance. Note: In this function, the data in the data center of Vue cannot be read. <script src="./js/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ name:"Hahaha", num:1111 }, methods: { }, // Before the vue instance is created beforeCreate(){ console.log('beforeCreate'); console.log(this.name); } </script> The name of the output data center cannot be read: created --- After the vue instance is created, note: in this function, the data in the data center of vue can be identified <script src="./js/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ name:"Hahaha", num:1111 }, // After the vue instance is created created(){ console.log("created"); console.log(this.name); } }) </script> View the results: Render the label at the view level: <div id="app"> <p>{{name}}</p> <p>{{num}}</p> </div> <script src="./js/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ name:"Hahaha", num:1111 }, //Before dom is mounted beforeMount(){ console.log("beforeMount"); //View DOM elements console.log(document.body.querySelector("#app").innerHTML); } }) </script> Output results before dom mounting: mounted --- after DOM is mounted this.$el --- at this time $el is the "real" DOM node <script src="./js/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ name:"Hahaha", num:1111 }, // After dom is mounted mounted(){ console.log("mounted"); console.log(document.body.querySelector("#app").innerHTML); } }) </script> View the output:
In the view layer, click to change the value of num to simulate data update and view the result: <div id="app"> <p id="num">{{num}}</p> <button @click="num++">Click data update (num+1)</button> </div> //Before data update beforeUpdate(){ console.log("beforeUpdate--before data update"); // View DOM elements console.log(document.body.querySelector("#num").innerHTML); }, //After data is updated updated(){ console.log("updated--After data updated"); // View DOM elements console.log(document.body.querySelector("#num").innerHTML); } At this time, when the data does not change, the effect cannot be seen in the console. When we click the button: This is the end of this article about the life cycle and hook functions in Vue. For more information about the life cycle hook functions in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Hide HTML elements through display or visibility
First look at the effect: When the mouse moves ov...
Recently, some friends said that after installing...
When we add borders to table and td tags, double ...
How to install Nginx in a specified location in C...
Table of contents Preface Discover the cause Cust...
Need to export the fields and properties of the t...
During today's lecture, I talked about the di...
In Windows operating system, the program to query...
Hello everyone, today I want to share with you ho...
I plan to realize a series of sticky note walls. ...
Use canvas to create graphics and text with shado...
<body style="scroll:no"> <tabl...
<br />Related article: Analysis of Facebook&...
How to write Vue foreach array and traverse array...
Table of contents Determine whether a record alre...