Vue入門和基礎——生命週期函式
阿新 • • 發佈：2018-11-25
Vue入門和基礎（二）
生命週期函式：
每個Vue例項被建立的時候都要經歷一系列的初始化過程，這個過程就是Vue的生命週期
先上一張官圖
其實官網上已經表明的很詳細了，從圖中我們可以看一個Vue例項的一整個生命週期中有很多個鉤子函式，不用的鉤子函式提供給我們在不同的時期進行操作，如圖我們可以看出一共有八個這樣的函式：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
下面就是一一介紹：
先上一段程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue的初始化過程</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'This is a APP' }, beforeCreate: function() { console.group('------beforeCreate建立前狀態------'); console.log("el : " + this.$el); //undefined console.log("data : " + this.$data); //undefined console.log("message: " + this.message) }, created: function() { console.group('------created建立完畢狀態------'); console.log("el : " + this.$el); //undefined console.log("data : " + this.$data); //已被初始化 console.log("message: " + this.message); //已被初始化 }, beforeMount: function() { console.group('------beforeMount掛載前狀態------'); console.log("el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("data : " + this.$data); //已被初始化 console.log("message: " + this.message); //已被初始化 }, mounted: function() { console.group('------mounted 掛載結束狀態------'); console.log("el : " + this.$el); //已被初始化 console.log(this.$el); console.log("data : " + this.$data); //已被初始化 console.log("message: " + this.message); //已被初始化 }, }) </script> </html>
執行程式碼在控制檯檢視得到結果：
我們可以看出在初始化之前，進行了資料的觀測，而在created的時候 data已經進行了繫結。但是el還是undefined；
beforeMount - mounted：
這個時候對el是否存在進行了判斷，如果存在就繼續，如果不存在，Vue的生命週期在此處就結束了，el就是當前例項化掛載的dom節點。而在mounted之後，h1標籤中的{{message}}變成了 This is a APP；
beforeUpdate - updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的初始化過程</title>
<script src="https://cdn.jsdelivr.net/npm/ 執行上述程式碼並點選Add按鈕控制檯檢視結果
這兩個函式元件更新時觸發。
beforeDestroy-destroyed：
beforeDestroy鉤子函式在例項銷燬之前呼叫。但是在此時，例項依然可以呼叫。
destroyed鉤子函式在Vue 例項銷燬後呼叫。整個例項被銷燬。