（十一）生命週期
1)概念
每個 Vue 例項在被建立時都要經過一系列的初始化過程，即生命週期階段。
如 : 建立vue例項----》渲染例項—》更新vue例項----》銷燬vue例項
然後在這個過程中會執行一些叫做生命週期鉤子的函式， 這給了使用者在不同階段新增自己的程式碼的機會。
2)生命週期鉤子函式
1.準備建立例項 beforeCreate 2.建立例項 3.建立例項完成 created 4.準備渲染例項 beforeMount 5.渲染例項 6.渲染例項完成 mounted 7.準備更新例項 beforeUpdate 8.更新例項 9.更新例項完成 updated 10.準備銷燬例項 beforeDestroy 11.銷燬例項 12.銷燬例項完成 destroyed
備註： 銷燬例項方法： 例項名.$destroy()。 一個例項被銷燬後，會清理它與其它例項的連線，解綁它的全部指令及事件監聽屬性。
3)基本演示
比如在建立例項之前有個準備階段：這裡就會執行一個生命週期鉤子函式
- beforeCreate
這個鉤子函式會在vue例項建立前執行，我們可以把例項建立前的一些初始化操作寫在這個函式裡面。
備註：從上我們可以知道，對於生命週期的鉤子函式，我們應該寫在vue例項的最外層，和data同級。
4)完整演示
直接把此程式碼放入瀏覽器裡面執行一遍檢視效果
<!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>Document</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <style> #app * { border: 1px solid red; margin: 10px; } </style> </head> <body> <div id="app"> {{message}} </div> <script> let vueApp = new Vue({ el: "#app", data: { message: 'Vue的生命週期' }, beforeCreate: function () { var mes = ` beforeCreate ：vue例項建立前的準備階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` alert(mes); console.info(mes); }, created: function () { var mes = ` created ：vue例項建立完成後的階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` ; alert(mes); console.info(mes); }, beforeMount: function () { var mes = ` beforeMount ：vue例項渲染前的準備階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` ; alert(mes); console.info(mes); }, mounted: function () { var mes = ` mounted ：vue例項渲染完成後的階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` ; alert(mes); console.info(mes); }, beforeUpdate: function () { var mes = ` beforeUpdate ：vue例項更新前的準備階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` ; alert(mes); console.info(mes); }, updated: function () { var mes = ` updated ：vue例項更新完成的階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` ; alert(mes); console.info(mes); }, beforeDestroy: function () { var mes = ` beforeDestroy ：vue例項銷燬前的準備階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` ; alert(mes); console.info(mes); }, destroyed: function () { var mes = ` destroyed ：vue例項銷燬完成的階段:【 el: ${this.$el}, data: ${this.$data}, message: ${this.message},】 ` ; alert(mes); console.info(mes); } }); </script> </body> </html>
5)各鉤子函式的說明
1.例項如下物件
let vueApp = new Vue({
el: "#app",
data: {
message: 'Vue的生命週期'
}
});
在此應用執行起來了的過程中，其各個階段如下
-
.beforeCreate 這是在vue例項建立之前的鉤子函式，在這個階段，由於vue例項還未建立，所以例項裡面的東西是undefined。
-
created 這是在vue例項建立完成後的鉤子函式，在這個階段，由於vue例項已經建立，所以例項裡面的data,message都初始化成功了，不再是undefined.但是還沒有去繫結dom節點，所以el屬性為undefined。
-
beforeMount 這是在vue例項建立後,渲染前的鉤子函式，在這個階段，由於vue例項即將要渲染， 所以el屬性為已經被賦值成了節點物件。不再是undefined，但是還沒有渲染進網頁
-
mounted 這是在vue例項渲染完成後的鉤子函式，在這個階段，網頁已經渲染完成
提示 beforeCreate , reated , beforeMount , mounted 這幾個生命週期鉤子函式從執行網頁到渲染完成這個過程會執行，不需要我們顯式的去觸發。 但是對於下面的幾個鉤子函式就需要顯式的行為來觸發，才能執行了。 beforeUpdate , updated , beforeDestroy , destroy.
- beforeUpdate
這是在vue例項被我們顯式的修改了，但是還沒正式的渲染進網頁時，才會觸發的鉤子函式。
- updated
這是例項物件被修改導致頁面也修改後渲染的才會觸發的建構函式
- beforeDestroy
這是例項物件執行了銷燬操作，但是還沒有真正銷燬時觸發的鉤子函式。
- destroyed 這是例項物件真正銷燬時觸發的鉤子函式。在這裡我們可以做一善後的工作。
注意：
執行了例項名.$destroy() 方法會完全銷燬一個例項。會清理它與其它例項的連線，解綁它的全部指令及事件監聽屬性。
例項銷燬後，物件還存在，但是已經不是和檢視繫結的vm了。任何修改都無法觸動檢視的變化。
請牢記四個單詞： create ， mount ，update ，destroy ，記住這幾個單詞就能明白並寫出所有的宣告週期了。
宣告週期圖示
