【vue】vue的生命週期詳解
阿新 • • 發佈：2018-12-15
vue的生命週期詳解
不多BB先上圖
可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作,，那麼先列出所有的鉤子函式，然後我們再進行詳解：
- beforeCreate——建立前
- created——建立後
- beforeMount——掛載前
- mounted——掛載後
- beforeUpdate——資料發生改變前
- updated——資料發生改變後
- beforeDestroy——例項銷燬前
- destroyed——例項銷燬後
1、beforeCreate 和 created
在這個生命週期之間，進行初始化事件，進行資料的觀測，根據圖可以看到在 created 的時候資料已經和 data
屬性進行繫結（放在 data 中的屬性當值發生改變的同時，檢視也會改變）
2、beforeMount 和 mounted
在這個階段首先會判斷物件是否有 el 選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命週期，直到在該vue例項上呼叫vm.$mount(el)
3、beforeUpdate 和 updated
在 beforeUpdate 時可以監聽到 data 的變化但是 view
層沒有被重新渲染，view層的資料沒有變化。等到 updated 的時候 view 層才被重新渲染，資料更新。
4、beforeDestroy 和 destroyed
beforeDestroy 鉤子函式在例項銷燬之前呼叫。在這一步，例項仍然完全可用。
destroyed 鉤子函式在 vue 例項銷燬後呼叫。呼叫後， vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
附：vue生命週期演示程式碼（請用瀏覽器開啟並檢視控制檯）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue的生命週期</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> <button @click="btnClick">改變資料</button> </div> </body> <script> var vue = new Vue({ el: '#app', data: { message: '初始資料' }, methods: { btnClick(){ this.message = '改變後的資料' } }, beforeCreate: function () { console.group('------beforeCreate建立前狀態------'); console.log("%c%s", "color:red", "el : " + this.$el); //undefined console.log("%c%s", "color:red", "data : " + this.$data); //undefined console.log("%c%s", "color:red", "message: " + this.message) }, created: function () { console.group('------created建立完畢狀態------'); console.log("%c%s", "color:red", "el : " + this.$el); //undefined console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, beforeMount: function () { console.group('------beforeMount掛載前狀態------'); console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, mounted: function () { console.group('------mounted 掛載結束狀態------'); console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group('------beforeUpdate 更新前狀態------'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, updated: function () { console.group('------updated 更新完成狀態------'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, beforeDestroy: function () { console.group('------beforeDestroy 銷燬前狀態------'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); }, destroyed: function () { console.group('------destroyed 銷燬完成狀態------'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) } }) </script> </html>