一、vue的生命周期是什么

? ? ? ?vue每個組件都是獨立的，每個組件都有一個屬于它的生命周期路克，從一個組件創(chuàng)建怠噪、數(shù)據(jù)初始化口四、掛載、更新蔓彩、銷毀，這就是一個組件所謂的生命周期旷赖。在組件中具體的方法有:

? ?beforeCreate? ? ??created

? ? beforeMount? ? ? ?mounted

? ? beforeUpdate? ? ? updated

? ? beforeDestroy? ? ?destroyed

二更卒、vue中內(nèi)置的方法?屬性和vue生命周期的運行順序（methods、computed蹂空、data、watch上枕、props)

? ? data的初始化是在created時已經(jīng)完成數(shù)據(jù)觀測(data observer)，并且諸如methods辨萍、computed屬性 props等已經(jīng)初始化

? ?data props computed watch methods他們之間的生成順序是什么呢？

? ? props => methods =>data => computed => watch

三爪飘、

1、在beforeCreate之前的生命周期

? ? ? 顧名思義悦施，創(chuàng)建之前的階段去团，此時該實例內(nèi)的所有東西都還沒有創(chuàng)建穷蛹，所以在這個生命周期鉤子函數(shù)中$el,data都是undefined土陪。

2肴熏、在beforeCreate和created鉤子函數(shù)之間的生命周期。

? ? ? 在這個生命周期之間蛙吏，進行初始化事件鞋吉，進行數(shù)據(jù)的觀測励烦，在created的時候數(shù)據(jù)已經(jīng)和data屬性進行綁定，在這個生命周期鉤子函數(shù)中坛掠，我們可以獲取到data的值并對它進行操作。

3屉栓、在created和beforeMount間的生命周期

（1）在這一階段，首先會判斷是否有el選項牲平，如果有的話就繼續(xù)向下編譯，如果沒有el選項域滥，則停止編譯欠拾，也就意味著停止了生命周期，直到在該實例上調(diào)用vm.$mount(el)[也就是動態(tài)引入了el藐窄。

（2）除了el酬土，我們還會用到template，template對生命周期的影響如下：

? ? ? ? 如果如果vue實例對象中有template參數(shù)選項撤缴，則將其作為模板編譯成render函數(shù)

? ? ? ? 如果沒有template選項，則將外部html作為模板編譯（可參考上面示例的結(jié)果）

? ? ? ? ?template中的模板優(yōu)先級要高于outer html的優(yōu)先級

所以el的判斷要在template之前屈呕，因為vue需要通過el找到對應(yīng)的outer template

（3）在vue對象中，還有一個render函數(shù)蟋软，它是以createElement作為參數(shù)嗽桩，然后做渲染岳守，而且可以直接嵌入JSX碌冶。

4、beforeMount和mounted鉤子函數(shù)間的生命周期

? ? 此時是給vue實例對象添加$el成員譬重，并且替換掉掛載的DOM元拒逮。

5臀规、beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期

? ? ? 當vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生變化预茄，會觸發(fā)對對應(yīng)組件的重新渲染喻喳，當數(shù)據(jù)改變后調(diào)用beforeupdata佣赖，當渲染完成后調(diào)用updated鉤子函數(shù)记盒。

注：通過試驗證明，在mounted鉤子函數(shù)中執(zhí)行修改data的操作會觸發(fā)beforeUpdate纪吮，而它之前的函數(shù)中只要不是可以跳出主線程的數(shù)據(jù)操作，都不會觸發(fā)beforeUpdate碾盟。例如使用setTimeout會使其中代碼跳出主線程到異步線程中，所以它的執(zhí)行會在mounted之后屈藐，所以會觸發(fā)beforeUpdate熙尉。

6联逻、beforeDestroy和destroyed鉤子函數(shù)間的生命周期检痰。

beforeDestroy鉤子函數(shù)在實例銷毀之前調(diào)用。在這一步實例仍然可用公壤。destroyed鉤子函數(shù)在Vue 實例銷毀后調(diào)用。調(diào)用后境钟，Vue 實例指示的所有東西都會解綁定俭识，所有的事件監(jiān)聽器會被移除洞渔，所有的子實例也會被銷毀套媚。

注意點兒：

keep-alive標簽包裹的組件在它們第一次被創(chuàng)建的時候就被緩存下來。與此相關(guān)的有兩個生命周期鉤子函數(shù)：activated 和 deactivated玫芦。當組件在<keep-alive>內(nèi)被切換時本辐，activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。

activated:在組件被激活時調(diào)用慎皱，在組價第一次渲染時也會被調(diào)用，之后每次keep-alive激活時被調(diào)用茫多。

deactivated:在組件被停用時調(diào)用。

注意：只有組件被 keep-alive 包裹時夺欲，這兩個生命周期才會被調(diào)用今膊，如果作為正常組件使用些阅，是不會被調(diào)用的斑唬。

vue-router路由，它也有類似于生命周期鉤子的函數(shù)腰素，允許我們在路由變化的不同階段進行一些操作，官網(wǎng)叫做導(dǎo)航守衛(wèi)弓千，本質(zhì)也是在路由變化的過程中添加鉤子函數(shù)献起。

路由組件內(nèi)可以直接定義路由導(dǎo)航守衛(wèi)

beforeRouteEnter 守衛(wèi)不能訪問this，但是我們可以傳遞給next方法一個回調(diào)谴餐，來訪問組件實例。在導(dǎo)航被確認的時候執(zhí)行回調(diào)岂嗓，并且把組件實例作為回調(diào)方法的參數(shù)。

注意 beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)食绿。對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經(jīng)可用了器紧，所以不支持傳遞回調(diào)，因為沒有必要了铲汪。

每個守衛(wèi)方法接收三個參數(shù)：

to:即將要進入的目標路由對象

from:當前導(dǎo)航正要離開的路由

next:function:一定要調(diào)用該方法來resolve鉤子函數(shù)，否則程序?qū)⒉辉S繼續(xù)執(zhí)行下去帽揪。