Vue's life cycle:
Before understanding the vue life cycle, we must grasp its three key points: create -> change -> destroy
create:
1. Execute beforeCreate
2. Monitoring data
3. Register for events
4. Execute create
5. Execute beforeMount
6. Execute Mounted
Note: When performing asynchronous requests in the future, you must write the method of requesting data outside the beforeCreate event, otherwise, you will not be able to operate the properties in the data after you get the data in the future.
Change:
Change the data in data:
1. Execute beforeUpdate first
2. Regenerate the virtual dom
3. Execute update again
destroy:
1. Execute beforeDestroy
2. Execute destroy
Trigger destroy condition: jump from one page to another
Application: clear this vue object in memory
1. Hook function executed when Vue is created
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../axios.js"></script>
9 <script src="../vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <!-- Define a vue management block, (View in MVVM) -->
14 <div id="app">
15
16 </div>
17
18 </body>
19
20 <script>
21 // 1 Set the host name and port number of the path uniformly
22 axios.defaults.baseURL = "http://157.122.54.189:9093";
23 // 2 Add axios to the vue prototype object
24 Vue.prototype.$http = axios;
25 // Instantiate vue object (View Model in MVVM)
26 new View({
27 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
28 el: '# app',
29 data:{
30 // data (Model in MVVM)
31 name:"小明"
32 },
33 beforeCreate:function() {
34 console.log("01.beforeCreate :"+this.name);
35
36 },
37 created:function() {
38 console.log("02.created :"+this.name);
39 // Change this to point
40 _this = this;
41 this.$http.get("/api/getprodlist").then(function(result){
42 var res = result.data;
43 _this.name = res.message[0].name;
44 });
45 },
46 beforeMount:function() {
47 console.log("03.beforeMount :"+this.name);
48 },
49 mounted:function() {
50 console.log("04.mounted :"+this.name);
51 }
52 })
53 </script>
54 </html>
2. Hook function executed when updating data
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../axios.js"></script>
9 <script src="../vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <!-- Define a vue management block, (View in MVVM) -->
14 <div id="app">
15 {{name}}
16 </div>
17
18 </body>
19
20 <script>
21 // 1 Set the host name and port number of the path uniformly
22 axios.defaults.baseURL = "http://157.122.54.189:9093";
23 // 2 Add axios to the vue prototype object
24 Vue.prototype.$http = axios;
25 // Instantiate vue object (View Model in MVVM)
26 var vm = new Vue({
27 // The block controlled by vm is the div whose id is app, and all vue instructions in this div can be parsed by vm
28 el: '# app',
29 data:{
30 // data (Model in MVVM)
31 name:"小明"
32 },
33 beforeCreate:function() {
34 //Output this.name is undifined because it has not been loaded
35 console.log("01.beforeCreate :"+this.name);
36
37 },
38 created:function() {
39 console.log("02.created :"+this.name);
40
41 },
42 beforeMount:function() {
43 console.log("03.beforeMount :"+this.name);
44 },
45 mounted:function() {
46 console.log("04.mounted :"+this.name);
47 },
48 beforeUpdate:function() {
49 console.log("05.beforeUpdate :"+this.name);
50 },
51 updated:function() {
52 console.log("06.updated :"+this.name);
53 }
54 })
55 </script>
56 </html>