Vue的生命週期：
在理解vue生命週期前要把握它的三個重點： 建立-> 改變 -> 銷燬
建立：
1.執行beforeCreatehtml
2.監控datavue
3.註冊事件ios
4.執行createaxios
5.執行beforeMountapi
6.執行Mountedapp
注意：未來執行異步請求時必定要 將請求數據的方法寫在beforeCreate事件以外，不然的話未來獲得數據之後沒法操做data中的屬性 dom
改變:
改變data中的數據：異步
1.先執行beforUpdate 函數
2.從新生成虛擬domui
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>