Vue基礎進階之 Vue生命週期與鉤子函數

時間 2020-05-20

標籤 vue 基礎進階生命週期鉤子函數简体版

原文原文鏈接

Vue生命週期

Vue生命週期：Vue實例從建立到銷燬的過程，稱爲Vue的生命週期；javascript

Vue生命週期示意圖：https://cn.vuejs.org/v2/guide/instance.html#生命週期圖示；html

Vue生命週期鉤子：又稱爲Vue生命週期鉤子方法/函數，是Vue爲開發者提供的方法，咱們能夠經過這些方法在Vue實例創建、掛載、數據更新、銷燬等階段作一些事情；vue

Vue的生命週期鉤子函數

鉤子函數的詳情介紹網址：https://cn.vuejs.org/v2/guide/instance.html#實例生命週期鉤子java

beforeCreate與created鉤子函數進行對數據的觀測數組

示例效果：ide

該兩個鉤子函數的vue代碼：函數

<script> window.onload= () =>{ new Vue({ el:'div', data:{ msg:'歡迎來到perfect*博客園！！！！' }, beforeCreate(){ alert("1 beforCreate 建立Vue實例，可是未進行數據的觀測"+this.msg); }, created(){ alert("2 created建立Vue實例，進行數據的觀測了"+this.msg); } }) } </script>

html:ui

<div >
            <input type="text" v-model="msg" /><br />
            <h1>{{msg}}</h1>
            
            
            
            
        </div>

beforeMount與mounted鉤子函數進行對數據的掛載：this

掛載實例的鉤子函數代碼：spa

beforeMount(){ alert("3 beforeMount掛載vue實例前"+this.msg+this.$refs.msgText.innerText); }, mounted(){ alert("4 mounted已經掛載vue實例了"+this.msg+this.$refs.msgText.innerText); }

HTML：

<h1 ref='msgText'>{{msg}}</h1>

beforeUpdate與updated鉤子函數：

數據更新前與更新後的鉤子函數：

beforeUpdate(){ alert("5 beforeUpdate數據更新前"+this.msg+this.$refs.msgText.innerText); }, updated(){ alert("6 updated數據更新後"+this.msg+this.$refs.msgText.innerText); }

html:

<input type="text" v-model="msg" /><br />
        
            <h1 ref='msgText'>{{msg}}</h1>

beforeDestroy與destroyed的鉤子函數：

由效果圖可知當點擊銷燬後，數據就不能再進行觀測了，由此觀測不到數據的修改

銷燬前與銷燬後的鉤子函數代碼：

beforeDestroy(){ alert("7 beforeDestroy 銷燬前"); }, destroyed(){ alert("8 destroyed 銷燬後"); }, methods:{ onDestroy(){ this.$destroy(); }

html:

<input type="text" v-model="msg" /><br />
            
            <h1 ref='msgText'>{{msg}}</h1>
            <button @click="onDestroy">銷燬</button>

以上全部鉤子函數組成的代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue生命週期鉤子函數</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <script>
 8             
 9             window.onload= () =>{ 10                 new Vue({ 11                     el:'div', 12  data:{ 13                         msg:'歡迎來到perfect*博客園！！！！'
14                         
15  }, 16                     
17                     
18  beforeCreate(){ 19                         alert("1 beforCreate 建立Vue實例，可是未進行數據的觀測"+this.msg); 20                         
21                         
22  }, 23                     
24                     
25  created(){ 26                         alert("2 created建立Vue實例，進行數據的觀測了"+this.msg); 27                         
28                         
29                         
30  }, 31                     
32  beforeMount(){ 33                         alert("3 beforeMount掛載vue實例前"+this.msg+this.$refs.msgText.innerText); 34                         
35  }, 36  mounted(){ 37                          alert("4 mounted已經掛載vue實例了"+this.msg+this.$refs.msgText.innerText); 38                         
39                         
40  }, 41  beforeUpdate(){ 42                         alert("5 beforeUpdate數據更新前"+this.msg+this.$refs.msgText.innerText); 43                         
44  }, 45  updated(){ 46                          alert("6 updated數據更新後"+this.msg+this.$refs.msgText.innerText); 47                         
48                         
49  }, 50  beforeDestroy(){ 51                         alert("7 beforeDestroy 銷燬前"); 52  }, 53  destroyed(){ 54                         alert("8 destroyed 銷燬後"); 55                         
56                         
57  }, 58  methods:{ 59  onDestroy(){ 60                             
61                             this.$destroy(); 62  } 63                         
64                         
65                         
66  } 67                     
68                     
69                     
70                     
71  }) 72                 
73                 
74  } 75         </script>
76     </head>
77     <body>
78         <div >
79             <input type="text" v-model="msg" /><br />
80             <!--<h1>{{msg}}</h1>-->
81             <h1 ref='msgText'>{{msg}}</h1>
82             <button @click="onDestroy">銷燬</button>
83             
84             
85             
86             
87         </div>
88     </body>
89 </html>