1瓢棒、vue實例生命周期鉤子的由來
每個vue應(yīng)用都是通過vue函數(shù)創(chuàng)建一個新的vue實例開始的：
var vm = new Vue({
//選項
})
vue實例再被創(chuàng)建時都要經(jīng)過一系列的初始化過程——從開始創(chuàng)建酌住、初始化數(shù)據(jù)墨微、編譯模板半等、掛載dom筒捺、渲染-更新渲染缩滨、卸載等一系列過程势就，稱之為vue的生命周期，通俗來說vue實例從創(chuàng)建到銷毀的過程脉漏，就是生命周期苞冯。
2、生命周期詳解
lifecycle.png
官網(wǎng)展示的這張實例的生命周期圖示侧巨。在這些生命周期鉤子的函數(shù)中舅锄，給用戶在不同階段添加自己帶嗎的機會。
比如created鉤子用來在一個實例被創(chuàng)建后執(zhí)行代碼：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
提供的鉤子包括：
- beforeCreate：創(chuàng)建前
實例司忱、組件通過new Vue() 創(chuàng)建出來之后會初始化事件和生命周期皇忿，然后就會執(zhí)行beforeCreate鉤子函數(shù)，這個時候烘贴，數(shù)據(jù)還沒有掛載呢禁添，只是一個空殼，無法訪問到數(shù)據(jù)和真實的dom桨踪，一般不做操作老翘。 - created：創(chuàng)建后
掛載數(shù)據(jù)，綁定事件等等锻离，然后執(zhí)行created函數(shù)铺峭，這個時候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會觸發(fā)updated函數(shù)汽纠，在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機會卫键，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取虱朵。 - beforeMount：掛載前
接下來開始找實例或者組件對應(yīng)的模板莉炉，編譯模板為虛擬dom放入到render函數(shù)中準備渲染钓账，然后執(zhí)行beforeMount鉤子函數(shù)，在這個函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成絮宁，馬上就要渲染,在這里也可以更改數(shù)據(jù)梆暮，不會觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機會绍昂，不會觸發(fā)其他的鉤子函數(shù)啦粹，一般可以在這里做初始數(shù)據(jù)的獲取。 - mounted：掛載后
接下來開始render窘游，渲染出真實dom唠椭，然后執(zhí)行mounted鉤子函數(shù)，此時忍饰，組件已經(jīng)出現(xiàn)在頁面中贪嫂，數(shù)據(jù)、真實dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了艾蓝，可以在這里操作真實dom等事情撩荣。 - beforeUpdate：更新前
當組件或?qū)嵗臄?shù)據(jù)更改之后，會立即執(zhí)行beforeUpdate饶深，然后vue的虛擬dom機制會重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染，一般不做什么事兒逛拱。 - updated：更新后
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁敌厘，在這之后會調(diào)用該鉤子。
當這個鉤子被調(diào)用時朽合，組件 DOM 已經(jīng)更新俱两，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下曹步，你應(yīng)該避免在此期間更改狀態(tài)宪彩，因為這可能會導(dǎo)致更新無限循環(huán)。 - beforeDestroy：銷毀前
實例銷毀之前調(diào)用讲婚。在這一步尿孔，實例仍然完全可用。一般在這里做一些善后工作筹麸，例如清除計時器活合、清除非指令綁定的事件、保存數(shù)據(jù)等操作物赶。 - destroyed：銷毀后
Vue 實例銷毀后調(diào)用白指。組件的數(shù)據(jù)綁定、監(jiān)聽...去掉后只剩下dom空殼酵紫，這個時候告嘲，執(zhí)行destroyed错维，在這里做善后工作也可以。
