Vue--vue中的生命周期

Vue的生命周期： 

在理解vue生命周期前要把握它的三个重点： 创建-> 改变 -> 销毁

创建：

               1.执行beforeCreate

　　　　 2.监控data

　　　　 3.注册事件

               4.执行create

               5.执行beforeMount

               6.执行Mounted

  注意：将来执行异步请求时一定要  将请求数据的方法写在beforeCreate事件之外，否则的话将来得到数据以后无法操作data中的属性         

改变:

　　　　改变data中的数据：

　　　　　　1.先执行beforUpdate 

　　　　　　2.重新生成虚拟dom

　　　　　　3.再执行update

 

销毁:

　　   1.执行beforeDestroy

　　　2.执行destroy

          触发销毁条件： 从一个页面跳转到另一个页面

　　　应用: 清除内存中的这个vue对象

 

一.创建Vue时执行的钩子函数

 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 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
14 <div id="app">
15 
16 </div>
17 
18 </body>
19 
20 <script>
21       // 1 将路径的主机名和端口号统一设置
22       axios.defaults.baseURL = "http://157.122.54.189:9093";
23       // 2 将axios加到vue原型对象中
24       Vue.prototype.$http = axios; 
25     // 实例化vue对象（MVVM中的View Model）
26     new Vue({
27         // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
28         el:'#app',
29         data:{
30         // 数据 （MVVM中的Model）   
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                 // 改变this指向
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>

二.更新数据时执行的钩子函数

 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 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
14 <div id="app">
15     {{name}}
16 </div>
17 
18 </body>
19 
20 <script>
21       // 1 将路径的主机名和端口号统一设置
22       axios.defaults.baseURL = "http://157.122.54.189:9093";
23       // 2 将axios加到vue原型对象中
24       Vue.prototype.$http = axios; 
25     // 实例化vue对象（MVVM中的View Model）
26     var vm = new Vue({
27         // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
28         el:'#app',
29         data:{
30         // 数据 （MVVM中的Model）   
31         name:"小明"
32         },
33         beforeCreate:function() {
34             //输出this.name是undifined 因为还没有加载 
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>
posted @ 2018-04-27 14:09  TigerZhang  阅读(845)  评论(0)    收藏  举报