vue項(xiàng)目是由一個(gè)一個(gè)小的組件堆積形成的組件樹，在這個(gè)組件樹中，每個(gè)組件都是一個(gè)vue實(shí)例，都有其自身的一個(gè)構(gòu)建的過程，我們成這個(gè)過程是組件的生命周期。

生命周期

過程：

1. new vue(): 這相當(dāng)代碼中執(zhí)行了new vue({})操作；

2. init（event&lifecycle）：在這個(gè)過程中，只初始化了空的vue實(shí)例，在這個(gè)實(shí)例上目前只有聲明周期函數(shù)和原型事件。

3. beforecreate(): 在實(shí)例初始化之后，數(shù)據(jù)觀測（data observer）和event/watcher事件配置之前調(diào)用，即此時(shí)的vue對(duì)象雖然被創(chuàng)建了，但是vue對(duì)象的屬性data和computed等還沒有綁定，所以在這里引用data跟computed里面的屬性應(yīng)該是會(huì)報(bào)錯(cuò)的。

4. 掛載數(shù)據(jù)（綁定屬性）：這里階段vue對(duì)象的屬性，包括computed計(jì)算屬性也運(yùn)算后綁定了；

5. created鉤子函數(shù)：這時(shí)候vue對(duì)象中的data和computed屬性都已經(jīng)綁定了，但是DOM還沒有生成，$el屬性還沒有存在。 即data已經(jīng)賦值了，computed已經(jīng)運(yùn)算完了，但是沒有動(dòng)態(tài)創(chuàng)建template屬性對(duì)應(yīng)的HTML元素，如果這個(gè)時(shí)候改變data中的數(shù)據(jù)不會(huì)觸發(fā)updata函數(shù)。 這里不要對(duì)dom節(jié)點(diǎn)操作，這里通過id去找dom點(diǎn)是找不到的。
   但是因?yàn)檫@時(shí)候data中已經(jīng)有數(shù)據(jù)，從created開始往后可以使用data中的數(shù)據(jù)想后臺(tái)做請(qǐng)求，但是不會(huì)觸發(fā)updata鉤子。

6. 檢查：
   1）檢查是否有el屬性，檢查vue配置，即new Vue{}里面的el項(xiàng)是否存在，有就繼續(xù)檢查template項(xiàng)。沒有則等到手動(dòng)綁定調(diào)用vm.$mount()，完成了全局變量$el的綁定。
   2）檢查是否有template屬性，檢查vue配置中的template選項(xiàng)是否有模板來填充被綁定的區(qū)域，即el屬性中指定的div，如果有render屬性，那么render就會(huì)替換template，在優(yōu)先級(jí)上：render>template>el；
   如果沒有template屬性，則將el屬性指定的div外層的元素作為template編譯。

7. beforeMount 鉤子函數(shù)：模板編譯，數(shù)據(jù)掛載之前的函數(shù)，數(shù)據(jù)還沒有掛載到頁面上，{{}}里面的變量還沒有替換。

8.模板編譯：vm.$el替換#el；vue對(duì)象中的數(shù)據(jù)（屬性）替換template中的內(nèi)容，這時(shí)給相當(dāng)模板中的變量賦值了。

9. mounted 鉤子函數(shù)：此時(shí)模板編譯完成了，數(shù)據(jù)掛載到了頁面上，即{{}}中的數(shù)據(jù)已經(jīng)正常顯示了。
   一般這里可以做一些初始化的操作，像服務(wù)器請(qǐng)求數(shù)據(jù)，顯示在dom里。這時(shí)候可以根據(jù)id等方式拿到dom點(diǎn)，這時(shí)候頁面已經(jīng)掛載，dom中的變量已經(jīng)賦值了，所以這時(shí)候可以通過getElementById等方式去操作dom。

10. beforeUpdate鉤子函數(shù)： 當(dāng)模板中的數(shù)據(jù)更新時(shí)觸發(fā)，但是在組件更新前，即函數(shù)雖然觸發(fā)，但是數(shù)據(jù)還沒有在dom上更新。

11. updated 鉤子函數(shù)： 當(dāng)模板中的數(shù)據(jù)更新后，已經(jīng)在dom點(diǎn)上重新渲染后觸發(fā)。

12. activated函數(shù)：keep-alive組件激活時(shí)調(diào)用

13. deactivated函數(shù)：keep-alive組件停用時(shí)調(diào)用

14. beforeDestroy：vue（組件）對(duì)象銷毀之前

15. destroyed：vue組件銷毀后