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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM