Vue的生命周期函數(shù)是指在Vue實(shí)例由創(chuàng)建最初到完整的運(yùn)行一次這個(gè)過(guò)程中會(huì)觸發(fā)的函數(shù)
可以理解為每一個(gè)Vue的實(shí)例在被創(chuàng)建出來(lái)的時(shí)候都需要有一個(gè)過(guò)程市框，例如我們要編譯模板濒持，要將實(shí)例掛載到某個(gè)元素上等，而在這一系列的執(zhí)行過(guò)程中就會(huì)觸發(fā)Vue自身設(shè)定的一些函數(shù)寄狼，而根據(jù)這些函數(shù)執(zhí)行的時(shí)期的不同我們可以針對(duì)性的在不同函數(shù)執(zhí)行時(shí)做一些操作
所有的生命周期鉤子會(huì)自動(dòng)綁定this上下文到實(shí)例中丁寄，因此我們可以在生命周期鉤子中訪問(wèn)實(shí)例數(shù)據(jù)，對(duì)屬性和方法進(jìn)行運(yùn)算泊愧，切記不可以使用箭頭函數(shù)來(lái)定義一個(gè)生命周期方法伊磺，因?yàn)榧^函數(shù)會(huì)自動(dòng)綁定上下文的關(guān)系，此時(shí)的this綁定不會(huì)是Vue實(shí)例
beforeCreate
在實(shí)例初始化之后删咱，在這個(gè)階段Vue重寫data/computed中的getter/setter方法屑埋，數(shù)據(jù)和方法沒有被配置之前被調(diào)用
created
在實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用，在這一步腋腮，實(shí)例已經(jīng)完成以下的配置：數(shù)據(jù)雀彼，屬性和方法的運(yùn)算，watch/event事件回調(diào)即寡，但是掛載階段還沒開始徊哑，$el屬性目前不可見
在這個(gè)階段，我們可以獲取實(shí)例中的數(shù)據(jù)和方法聪富，并對(duì)DOM中的每個(gè)節(jié)點(diǎn)進(jìn)行處理莺丑，匹配{{ }}插值和v-model、v-bind等節(jié)點(diǎn)屬性，將插值與data綁定
針對(duì)檢測(cè)到的不同屬性梢莽，比如在input中檢測(cè)到v-model萧豆，那么會(huì)給input元素添加input事件監(jiān)聽
檢測(cè)到v-bind，會(huì)發(fā)布一個(gè)訂閱消息給watcher昏名，最終綁定到data上
檢測(cè)到v-for涮雷，會(huì)添加遍歷方法等
最后會(huì)把檢測(cè)到的Vue自定義的節(jié)點(diǎn)屬性都移除
beforeMount
在掛載開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用轻局，在這個(gè)時(shí)候還不能訪問(wèn)DOM節(jié)點(diǎn)洪鸭，此時(shí)我們的$el為虛擬的dom節(jié)點(diǎn)，在節(jié)點(diǎn)中的數(shù)據(jù)依然是{{data}}的形式
mounted
el被新創(chuàng)建的vm.$el替換仑扑，并掛載到實(shí)例上去之后調(diào)用該函數(shù)览爵，在這個(gè)時(shí)候可以訪問(wèn)DOM節(jié)點(diǎn)了，節(jié)點(diǎn)中的數(shù)據(jù)渲染完成
beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用镇饮，發(fā)生在虛擬DOM重新渲染和補(bǔ)丁之前蜓竹，我們可以在這個(gè)鉤子中進(jìn)一步更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過(guò)程
頁(yè)面上的數(shù)據(jù)储藐，比如input/select等數(shù)據(jù)有變動(dòng)俱济，會(huì)觸發(fā)這個(gè)元素上被綁定的監(jiān)聽事件，將這個(gè)讀取的請(qǐng)求發(fā)布給watcher,wetcher在觸發(fā)data/computed中的setter邑茄，從而改變Vue實(shí)例上的屬性值
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬的DOM重新渲染和打補(bǔ)丁姨蝴，在這之后會(huì)調(diào)用該鉤子俊啼，當(dāng)這個(gè)鉤子被調(diào)用時(shí)肺缕，組件DOM已經(jīng)更新，所以在該函數(shù)內(nèi)部可以執(zhí)行依賴于DOM的操作
節(jié)點(diǎn)元素渲染完畢/屬性值修改完畢
activated
keep-alive組件激活時(shí)調(diào)用
deactivated
keep-alive組件停用時(shí)調(diào)用
beforeDestroy
實(shí)例銷毀之前調(diào)用授帕，在這一步時(shí)同木，我們?nèi)匀豢梢允褂脤?shí)例
destroyed
vue實(shí)例銷毀后調(diào)用，調(diào)用后跛十，vue實(shí)例的所有東西都會(huì)解綁定彤路，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀
<body>
<div id="box">
{{msg}}
<button @click="destroy">destroy</button>
</div>
<script>
new Vue({
data: {
msg: "vue實(shí)例"
},
methods: {
destroy() {
this.$destroy() //shoudongjava
}
},
beforeCreate() {
console.log("%c%s", "color:red", "實(shí)例初始化");
console.log(this.$data, "實(shí)例數(shù)據(jù)");
console.log(this.destroy, "實(shí)例方法");
console.log(this.$el, "實(shí)例掛載");
debugger;
},
created() {
console.log("%c%s", "color:red", "實(shí)例創(chuàng)建完成");
console.log(this.$data, "實(shí)例數(shù)據(jù)");
console.log(this.destroy, "實(shí)例方法");
console.log(this.$el, "實(shí)例掛載");
debugger;
},
beforeMount() {
console.log("%c%s", "color:red", "實(shí)例掛載之前");
console.log(this.$data, "實(shí)例數(shù)據(jù)");
console.log(this.destroy, "實(shí)例方法");
console.log(this.$el, "實(shí)例掛載");
debugger;
},
mounted() {
console.log("%c%s", "color:red", "實(shí)例掛載完成");
console.log(this.$data, "實(shí)例數(shù)據(jù)");
console.log(this.destroy, "實(shí)例方法");
console.log(this.$el, "實(shí)例掛載");
debugger;
},
beforeDestroy() {
console.log("%c%s", "color:red", "實(shí)例銷毀之前");
console.log(this.$data, "實(shí)例數(shù)據(jù)");
console.log(this.destroy, "實(shí)例方法");
console.log(this.$el, "實(shí)例掛載");
},
destroyed() {
console.log("%c%s", "color:red", "實(shí)例銷毀之后");
console.log(this.$data, "實(shí)例數(shù)據(jù)");
console.log(this.destroy, "實(shí)例方法");
console.log(this.$el, "實(shí)例掛載");
}
}).$mount("#box")
</script>
</body>
