Vue在被創(chuàng)建的時(shí)候都要經(jīng)過一系列的初始化過程抱虐，這個(gè)初始化過程例如設(shè)置數(shù)據(jù)監(jiān)聽，編譯模板，將實(shí)例掛載Dom并在數(shù)據(jù)變化時(shí)更新Dom逞刷。
在這個(gè)過程中也會(huì)運(yùn)行生命周期鉤子函數(shù)。

生命周期鉤子函數(shù)：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestory
• destoryed

1.beforeCreate 和 created之間的生命周期

初始化事件妻熊，進(jìn)行數(shù)據(jù)的觀測(cè)夸浅，可以看到當(dāng)created的時(shí)候已經(jīng)和data綁定（所以當(dāng)data改變的時(shí)候，視圖也會(huì)進(jìn)行變化）

image.png

2. created 和 beforeMount之間生命周期

image.png

created和beforeMount之間可以看到需要進(jìn)行判斷是否有el對(duì)象扔役，有則繼續(xù)向下編譯帆喇，沒有的話則停止編譯，直到vue實(shí)例上調(diào)用vm.$mount(el)亿胸。
例如 注釋掉

el:'#app'

則運(yùn)行到created這個(gè)生命周期就停止運(yùn)行了坯钦，
但是如果這個(gè)時(shí)候在vue實(shí)例上調(diào)用，就會(huì)繼續(xù)向下執(zhí)行

vm.$mount(el) // 這個(gè)el就是掛載的dom節(jié)點(diǎn)

template有否對(duì)于生命周期的影響
(1) 存在template時(shí)侈玄，將其作為模板編譯成render函數(shù)
(2) 不存在時(shí)婉刀，則用外部HTML作為模板編譯
可以看出temlate優(yōu)先級(jí)要比外部HTML高
vue對(duì)象中還存在render函數(shù)，以createElement作為參數(shù)序仙，然后做渲染操作突颊，可直接嵌入jsx
渲染優(yōu)先級(jí)順序
render函數(shù) > template >外部HTML

3.beforeMount和mounted之間生命周期

image.png

可以看到beforeMount之后，給vue實(shí)例添加$el對(duì)象潘悼，并且替換掉掛載的dom元素

4.beforeUpdate和updated之間生命周期

image.png

當(dāng)data變化時(shí)洋丐，會(huì)觸發(fā)到對(duì)應(yīng)組件的重新渲染，先后調(diào)用beforeUpdate和updated鉤子函數(shù)挥等。

5.beforeDestory和destoryed

image.png

beforeDestory鉤子函數(shù)在實(shí)例銷毀前調(diào)用友绝，在這一步，實(shí)例仍完全可用肝劲。
destoryed在實(shí)例銷毀后調(diào)用迁客，調(diào)用后郭宝，vue指定的所有東西都會(huì)解綁定，所有監(jiān)聽器會(huì)被移除掷漱，子實(shí)例也完全被銷毀粘室。

在vue-cli生成的項(xiàng)目中，打印生命周期前后如下：

 beforeCreate() {
    console.group('------beforeCreate創(chuàng)建前狀態(tài)------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //undefined
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //undefined
  }
  created() {
    console.group('------created創(chuàng)建完畢狀態(tài)------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //undefined
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //已被初始化
  }
  beforeMount() {
    console.group('------beforeMount掛載前狀態(tài)------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //已被初始化  虛擬dom
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //已被初始化
  }
  mounted() {
    console.group('------mounted 掛載結(jié)束狀態(tài)------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //已被初始化
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //已被初始化
  }

------beforeCreate創(chuàng)建前狀態(tài)------
 el     :undefined
 data   :undefined
 ------created創(chuàng)建完畢狀態(tài)------
 el     :undefined
 data   :[object Object]
 ------beforeMount掛載前狀態(tài)------
 el     :undefined
 data   :[object Object]
------mounted 掛載結(jié)束狀態(tài)------
 el     :[object HTMLElement]
 data   :[object Object]

參考：https://segmentfault.com/a/1190000011381906