每個實例從創(chuàng)建到銷毀,其實就是經(jīng)歷了生命周期。正如我們自己，生老病死，也是一個生命周期，當我們需要給我們生命添加顏色的時候，就出現(xiàn)了鉤子函數(shù)。
實例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
</head>
<body>
<div id="app">
<p>{{msg}},我要去打怪獸?。?！</p>
</div>
<script src="./base/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
// template:"<div>我是大頭兒子<div/>",
// render(createElemnt){
// return createElemnt('h1',"我是蜘蛛俠")
// },
data:{
msg:"我是迪迦凹凸曼",
},
beforeCreate(){
console.log("befroeCreate創(chuàng)建前...")
console.log(this.$el)
console.log(this.$data)
},
created(){
console.log("created創(chuàng)建完畢...")
console.log(this.$el)
console.log(this.$data)
},
beforeMount(){
console.log("befroeMount掛載前...")
console.log(this.$el)
console.log(this.$data)
},
mounted(){
console.log("mounted掛載完畢...")
console.log(this.$el)
console.log(this.$data)
},
beforeUpdate: function () {
console.log("beforeUpdate更新之前...")
console.log(this.$el)
console.log(this.$data)
},
updated(){
console.log("Updated更新后...")
console.log(this.$el)
console.log(this.$data)
},
beforeDestroy(){
console.log("beforeDestroy銷毀前...")
console.log(this.$el)
console.log(this.$data)
},
destroyed(){
console.log("destroyed銷毀完成...")
console.log(this.$el)
console.log(this.$data)
}
})
</script>
</body>
</html>
生命周期
一.初始化階段
1.一個組件或?qū)嵗纳芷诙际菑膎ew開始的
2.實例化之后，內(nèi)部會對初始化事件與生命周期做相關的配置
3.befroeCreate()鉤子函數(shù)之前，此時該實例內(nèi)的所有東西都還沒有創(chuàng)建，所以數(shù)據(jù)(%E5%92%8Cdom()
el)節(jié)點都不能獲取到
輸出結(jié)果
4.在created的時候鉤子函數(shù)掛載完畢，數(shù)據(jù)已經(jīng)和data屬性進行綁定,所以可以獲取到數(shù)據(jù)，并可以對獲取到的數(shù)據(jù)進行更改，但是真實的dom節(jié)點還是獲取不到，
通常我們會在created鉤子函數(shù)中進行，事件的綁定和ajax異步請求數(shù)據(jù),因為created在創(chuàng)建完畢會進行數(shù)據(jù)劫持，添加getter和sertter
Vue 響應式核心就是，setter 的時候會收集依賴，getter 的時候會觸發(fā)依賴更新
5.在created和beforeMount鉤子函數(shù)間的生命周期
首先，會判斷是否存在$el選項,如果有的話就繼續(xù)向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命周期。
沒有el，就調(diào)用vm.$mount(el)[也就是動態(tài)引入了el]，
其次，判斷是組件還是vue實例，是否添加了template組件
這就考慮到tempate與outerHTML的優(yōu)先級的問題了
avatar
avatar
注：template選項>outer Html
其實在我們添加或者判斷template時還有一個render()
它是以createElement作為參數(shù)，然后做渲染，而且可以直接嵌入JSX。
avatar
acatar
注：綜合排名優(yōu)先級：render函數(shù)>template選項>outer Html
6.befroeMount()鉤子函數(shù)代表真實的dom馬上就渲染出來，可以看到{{msg}}并沒有渲染出來，所以頁面并中沒有生成真實的dom
生成好虛擬的dom后，可以用render函數(shù)替換對應的el，渲染成真實dom結(jié)構(gòu)
7.mounted(),出現(xiàn)真實dom結(jié)構(gòu)，初始化最后的鉤子函數(shù),
數(shù)據(jù)掛載完畢，所以掛載元素中顯示的是msg的值
這個鉤子函數(shù)dom獲取的數(shù)據(jù)內(nèi)容是更新前的內(nèi)容?
二、運行中階段
總體流程
8.befroeUpdate鉤子函數(shù)不會自己執(zhí)行，當vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生變化(修改真實dom)，會觸發(fā)對應組件的重新渲染，當數(shù)據(jù)改變后調(diào)用beforeupdata
9.Update()鉤子函數(shù)，當數(shù)據(jù)更改后調(diào)用befroeUpdate鉤子函數(shù)后，當頁面渲染完成后調(diào)用updated
獲取的內(nèi)容是更新后的數(shù)據(jù)，生成虛擬的dom，與之前的虛擬dom進行對比，通過DIss算法
重新進行render（）?
acatar
注：這點可以通過在updated鉤子函數(shù)中使用alert打斷程序運行，可以看到頁面中并沒有更新，而且通過官方流程圖也可以看出。
三、銷毀階段
10.beforeDestroy和destroyed鉤子函數(shù)間的生命周期。
befroeDestroy()銷毀前，用來銷毀定時器以及初始化的事宜
destroyed()銷毀后，雙向數(shù)據(jù)綁定，組件的監(jiān)聽被移除，所有的子實例都會被銷毀，但是dom結(jié)構(gòu)還是存在的，但是不能渲染了
注：銷毀后不能對dom修改而影響view了
總結(jié)
其實整個流程都可以從vue官網(wǎng)圖示，看的的出來，其中還有還多的細節(jié)沒有講出來，有不足的地方，請各位大神多多建議.希望本文會對你有所幫助。
官網(wǎng)圖示
