一呻逆、生命周期的含義
每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如心肪，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板过蹂、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等十绑。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會酷勺。
生命周期圖示：
二本橙、生命周期的過程
生命周期鉤子的 this 上下文指向調(diào)用它的 Vue 實例。
注意：在生命周期函數(shù)中不要使用箭頭函數(shù)
1脆诉、beforeCreate 創(chuàng)建之前(數(shù)據(jù)初始化之前)
beforeCreate生命周期函數(shù)甚亭，一般在開發(fā)中很少使用贷币，除非要設(shè)置Vue實例的內(nèi)容。
在beforeCreate的時候狂鞋，Vue實例身上的數(shù)據(jù)還沒有初始化完成片择。
在實例初始化之后,進(jìn)行數(shù)據(jù)偵聽和事件/偵聽器的配置之前同步調(diào)用。
// 創(chuàng)建之前（數(shù)據(jù)初始化之前）
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定掛載的容器
el:'#app',
data:{
name:'張三',
age:20
},
// 創(chuàng)建之前（數(shù)據(jù)初始化之前）
beforeCreate(){
console.log('-----------beforeCreate---------')
// 這個生命周期函數(shù)骚揍，基本上不用字管，除非要設(shè)置Vue實例
this.__proto__.fn = function () {
alert('哈哈！')
}
// Vue實例信不，已經(jīng)創(chuàng)建完成
console.log(this)
// Vue實例身上的數(shù)據(jù)還沒有初始化完成
console.log(this.name+''+this.age);
},
})
</script>
2嘲叔、created 數(shù)據(jù)初始化完成
（1）created 生命周期函數(shù)
在這一步中，實例已完成對選項的處理抽活，意味著以下內(nèi)容已被配置完畢：數(shù)據(jù)偵聽硫戈、計算屬性、方法下硕、事件/偵聽器的回調(diào)函數(shù)丁逝。
created 生命周期函數(shù)，通常用于初始化Vue管理的數(shù)據(jù)梭姓，比如：發(fā)送Ajax請求一般會放在這里
// 創(chuàng)建完成（數(shù)據(jù)初始化完成）
created(){
console.log('-------------created----------');
// 這個生命周期函數(shù)霜幼，通常用于初始化Vue管理的數(shù)據(jù)，比如：發(fā)送Ajax請求一般會放在這里
console.log(this);
console.log(this.name+''+this.age);
},
})
（2）el選項和template選項
el的使用：
提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標(biāo)誉尖∽锛龋可以是 CSS 選擇器，也可以是一個 HTMLElement 實例铡恕。
在實例掛載之后琢感，元素可以用vm.mount() 手動開啟編譯诀艰。
template的使用：
一個字符串模板作為 Vue 實例的標(biāo)識使用牌捷。模板將會替換掛載的元素。掛載元素的內(nèi)容都將被忽略涡驮，除非模板的內(nèi)容有分發(fā)插槽。如果 Vue 選項中包含渲染函數(shù)喜滨，該模板將被忽略捉捅。
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
</div>
通過vue實例的mount方法的好處是寄月，可以自行選擇掛載的時機
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定掛載的容器
el:'#app',
// 指定模板（如果有模板，vue會渲染整個模板;如果沒有模板无牵，vue會將el里面的所有內(nèi)容當(dāng)成模板使用）
// template:"<div><h2>{{name}}</h2><h2>{{age}}</h2></div>",
data:{
name:'張三',
age:20
},
// 創(chuàng)建完成（數(shù)據(jù)初始化完成）
created(){
console.log('-------------created----------');
// 這個生命周期函數(shù)漾肮，通常用于初始化Vue管理的數(shù)據(jù)，比如：發(fā)送Ajax請求一般會放在這里
console.log(this);
console.log(this.name+''+this.age);
},
})
setTimeout(() => {
// 通過vue實例的$mount方法茎毁，手動掛載容器
// 通過el選項指定掛載容器克懊，當(dāng)模板渲染成功后，會立刻掛載頁面
// $mount方法的好處是七蜘，可以自行選擇掛載的時機
vm.$mount('#app')
}, 1000);
</script>
3谭溉、beforeMount 掛載之前
模板已經(jīng)成功渲染，但是還沒有將內(nèi)容掛載到頁面中橡卤。
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用扮念。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeMount() {
console.log('----------beforeMount----------');
//這個生命周期函數(shù)碧库，基本用不上
console.log(this.$el);
//可以修改數(shù)據(jù)柜与，但是內(nèi)容沒有掛載到頁面，并且后續(xù)內(nèi)容會被真正的數(shù)據(jù)替換掉嵌灰。
document.querySelector('#name').innerHTML = '哈哈'
},
4弄匕、mounted 掛載完成
mounted 生命周期函數(shù)，通常用于對DOM的重新改動
模板已經(jīng)渲染成功伞鲫，并且已經(jīng)將內(nèi)容掛載到了頁面中
mounted() {
console.log('------------mounted-----------')
// 這個生命周期粘茄，通常用于對DOM的重新改動
console.log(this.$el);
//可以修改數(shù)據(jù)，并且重新渲染到頁面
document.querySelector('#name').innerHTML = '呵呵'
},
5秕脓、beforeUpdate 數(shù)據(jù)更新之前
數(shù)據(jù)已經(jīng)改了柒瓣，只是還沒有重新掛載頁面
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<button @click="name='李四'">修改姓名</button>
<button @click="age=35">修改年齡</button>
</div>
beforeUpdate() {
console.log('-------------beforeUpdate----------');
console.log(this.name+''+this.age);
console.log(this.$el);
},
6、updated 數(shù)據(jù)更新完成
數(shù)據(jù)已經(jīng)改了吠架，且已經(jīng)掛載到頁面
當(dāng)這個鉤子被調(diào)用時芙贫，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作傍药。然而在大多數(shù)情況下磺平，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變拐辽，通常最好使用計算屬性或 watch 取而代之拣挪。
// 修改完成（數(shù)據(jù)已經(jīng)改了，且已經(jīng)掛載到頁面）
updated() {
console.log('-------------updated----------');
console.log(this.name+''+this.age);
console.log(this.$el);
},
7俱诸、beforeDestroy 銷毀之前
在beforeDestroy階段菠劝，對數(shù)據(jù)做任何的修改，都不會重新渲染到頁面睁搭。該階段赶诊，實例仍然完全可用笼平，我們通常會在這個生命周期函數(shù)中做一些收尾的工作。 比如：停掉開啟的定時器舔痪，初始化一些數(shù)據(jù)等等寓调。
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<!-- 點擊按鈕調(diào)用銷毀Vue實例的方法 -->
<button @click="destroy">不過了</button>
</div>
beforeDestroy() {
console.log('-------------beforeDestroy----------');
// 這個生命周期函數(shù)，會用的多一些
console.log(this);
// 對數(shù)據(jù)做任何的修改锄码，都不會重新渲染到頁面
this.name = "王五"
},
8夺英、destroyed 銷毀完成
實例銷毀后調(diào)用。該鉤子被調(diào)用后巍耗，對應(yīng) Vue 實例的所有指令都被解綁秋麸，所有的事件監(jiān)聽器被移除，所有的子實例也都被銷毀炬太。
destroyed 生命周期基本不用
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<!-- 點擊按鈕調(diào)用銷毀Vue實例的方法 -->
<button @click="destroy">不過了</button>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定掛載的容器
el:'#app',
data:{
name:'張三',
age:20
},
//方法
methods: {
destroy(){
this.$destroy()
}
},
destroyed() {
console.log('-------------destroyed----------');
// 這個生命周期灸蟆，基本不用
console.log(this);
this.name = "王五"
},
})
</script>
