（十一）vue實例的生命週期

時間 2020-12-25

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 ，記住這幾個單詞就能明白並寫出所有的聲明週期了。

聲明週期圖示