Vue--vue中的生命周期
阿新 • • 發佈：2017-11-19
png prototype scale pat 均可 .cn scrip content log
Vue的生命周期：
在理解vue生命周期前要把握它的三個重點： 創建-> 改變 -> 銷毀
創建：
(1).實例對象
1.監控data屬性
2.設置事件
3.根據data編譯模塊，渲染頁面
4.調用mounted
5.vue在創建對象的時候，也向這個流程中註冊了很多鉤子函數
beforeCreate
在這個事件執行時data和method是沒有加載完成的
如果要發送ajax請求最好在beforeCreate後面三個事件中完成
created
veforeMount
mouted
改變:
改變data中的數據：
1.先執行beforUpdate
2.再執行update
銷毀:
從一個頁面跳轉到另一個頁面
應用: 清除內存中的這個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> 1112 <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>
Vue--vue中的生命周期