什么是 vue 生命周期

vue生命周期是指vue實(shí)例對(duì)象從創(chuàng)建之初到銷毀的過(guò)程，vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的湿右，在生命周期的不同階段調(diào)用對(duì)應(yīng)的鉤子函數(shù)實(shí)現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能谜诫。

八個(gè)階段：

1锌订、beforeCreate(創(chuàng)建前),

對(duì)應(yīng)的鉤子函數(shù)為beforeCreate陨享。此階段為實(shí)例初始化之后，此時(shí)的數(shù)據(jù)觀察和事件機(jī)制都未形成峦阁，不能獲得DOM節(jié)點(diǎn)谦铃。（沒(méi)有data，沒(méi)有el）

使用場(chǎng)景：因?yàn)榇藭r(shí)data和methods都拿不到榔昔，所以通常在實(shí)例以外使用驹闰，可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)

2撒会、created(創(chuàng)建后)嘹朗，

對(duì)應(yīng)的鉤子函數(shù)為created。在這個(gè)階段vue實(shí)例已經(jīng)創(chuàng)建诵肛，仍然不能獲取DOM元素屹培。（有data，沒(méi)有el）

使用場(chǎng)景：模板渲染成html前調(diào)用怔檩，此時(shí)可以獲取data和methods褪秀，so 可以初始化某些屬性值，然后再渲染成視圖薛训，異步操作可以放在這里媒吗，初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件乙埃，異步請(qǐng)求也適宜在這里調(diào)用

3闸英、beforeMount(載入前),

對(duì)應(yīng)的鉤子函數(shù)是beforeMount，在這一階段介袜，我們雖然依然得不到具體的DOM元素甫何，但vue掛載的根節(jié)點(diǎn)已經(jīng)創(chuàng)建，下面vue對(duì)DOM的操作將圍繞這個(gè)根元素繼續(xù)進(jìn)行米酬；beforeMount這個(gè)階段是過(guò)渡性的沛豌，一般一個(gè)項(xiàng)目只能用到一兩次趋箩。（有data赃额，有el）

4、mounted(載入后)叫确，

對(duì)應(yīng)的鉤子函數(shù)是mounted跳芳。mounted是平時(shí)我們使用最多的函數(shù)了，一般我們的異步請(qǐng)求都寫在這里竹勉。在這個(gè)階段飞盆，數(shù)據(jù)和DOM都已被渲染出來(lái)。

使用場(chǎng)景：模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后再對(duì)數(shù)據(jù)和DOM做一些操作吓歇，需要操作DOM的方法可以放在這里

5孽水、beforeUpdate(更新前),

對(duì)應(yīng)的鉤子函數(shù)是beforeUpdate。在這一階段城看，vue遵循數(shù)據(jù)驅(qū)動(dòng)DOM的原則女气。beforeUpdate函數(shù)在數(shù)據(jù)更新后雖然沒(méi)立即更新數(shù)據(jù)，但是DOM中的數(shù)據(jù)會(huì)改變测柠，這是Vue雙向數(shù)據(jù)綁定的作用炼鞠。

6、updated（更新后）,

對(duì)應(yīng)的鉤子函數(shù)是updated轰胁。在這一階段DOM會(huì)和更改過(guò)的內(nèi)容同步谒主。

使用場(chǎng)景：需要對(duì)數(shù)據(jù)更新做統(tǒng)一處理的；如果需要區(qū)分不同的數(shù)據(jù)更新操作可以使用$nextTick

7、beforeDestroy(銷毀前)，

對(duì)應(yīng)的鉤子函數(shù)是beforeDestroy艘包。在上一階段Vue已經(jīng)成功的通過(guò)數(shù)據(jù)驅(qū)動(dòng)DOM更新蚁吝，當(dāng)我們不再需要vue操縱DOM時(shí)，就要銷毀Vue,也就是清除vue實(shí)例與DOM的關(guān)聯(lián)结缚，調(diào)用destroy方法可以銷毀當(dāng)前組件。在銷毀前，會(huì)觸發(fā)beforeDestroy鉤子函數(shù)备典。

使用場(chǎng)景：可以做一個(gè)確認(rèn)停止事件的確認(rèn)框

8、destroyed（銷毀后）

對(duì)應(yīng)的鉤子函數(shù)是destroyed意述。在銷毀后提佣，會(huì)觸發(fā)destroyed鉤子函數(shù)。

activated：在使用vue-router時(shí)有時(shí)需要使用<keep-alive></keep-alive>來(lái)緩存組件狀態(tài)荤崇，這個(gè)時(shí)候created鉤子就不會(huì)被重復(fù)調(diào)用了拌屏。

如果我們的子組件需要在每次加載的時(shí)候進(jìn)行某些操作，可以使用activated鉤子觸發(fā)术荤。

deactivated：<keep-alive></keep-alive>組件被移除時(shí)使用倚喂。

vue的生命周期的思想貫穿在組件開發(fā)的始終，通過(guò)熟悉其生命周期調(diào)用不同的鉤子函數(shù)瓣戚，我們可以準(zhǔn)確的控制數(shù)據(jù)流和其對(duì)DOM的影響端圈；vue生命周期的思想是Vnode和MVVM的生動(dòng)體現(xiàn)和繼承。

嵌套組件的生命周期的執(zhí)行順序：

vm.beforeCreate ——> vm.created ——> vm.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> vm.mounted

更改組件數(shù)據(jù)　　修改子組件的數(shù)據(jù)

vm.beforeCreate ——> vm.created ——> vm.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> vm.mounted ——> son.beforeUpdate ——> son.updated

vue生命周期的作用是什么

每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如子库，需要設(shè)置數(shù)據(jù)監(jiān)聽舱权、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等仑嗅。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做 生命周期鉤子 的函數(shù)宴倍，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)张症。（ps：生命周期鉤子就是生命周期函數(shù)）例如，如果要通過(guò)某些插件操作DOM節(jié)點(diǎn)鸵贬，如想在頁(yè)面渲染完后彈出廣告窗俗他， 那我們最早可在mounted 中進(jìn)行

第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

第一次頁(yè)面加載時(shí)會(huì)觸發(fā)?beforeCreate,?created,?beforeMount,?mounted?這幾個(gè)鉤子

DOM渲染在 哪個(gè)周期中就已經(jīng)完成了阔逼？

DOM渲染在mounted中就已經(jīng)完成了

created和mounted的區(qū)別

vue的實(shí)例是類似于創(chuàng)建一個(gè)對(duì)象,里面包含生命周期鉤子函數(shù),data（對(duì)象）,methods（方法）.components（計(jì)算屬性）等...

created:在模板渲染成html前調(diào)用拯辙，即通常初始化某些屬性值，然后再渲染成視圖颜价。

mounted:在模板渲染成html后調(diào)用涯保，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作周伦。

掛載到節(jié)點(diǎn)上的初始化方法通常用mounted去操作夕春，主動(dòng)調(diào)起的用methods里面封裝方法。

數(shù)據(jù)初始化一般放到created里面专挪，這樣可以及早發(fā)請(qǐng)求獲取數(shù)據(jù)及志，如果有依賴dom必須存在的情況，就放到mounted(){this.$nextTick(() => { /* code */ })}里面

Vue是異步執(zhí)行dom更新的寨腔，一旦觀察到數(shù)據(jù)變化速侈，Vue就會(huì)開啟一個(gè)隊(duì)列，然后把在同一個(gè)事件循環(huán) (event loop) 當(dāng)中觀察到數(shù)據(jù)變化的 watcher 推送進(jìn)這個(gè)隊(duì)列迫卢。如果這個(gè)watcher被觸發(fā)多次倚搬，只會(huì)被推送到隊(duì)列一次。這種緩沖行為可以有效的去掉重復(fù)數(shù)據(jù)造成的不必要的計(jì)算和DOm操作乾蛤。而在下一個(gè)事件循環(huán)時(shí)每界，Vue會(huì)清空隊(duì)列，并進(jìn)行必要的DOM更新

vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)

看實(shí)際情況家卖，一般在?created（或beforeRouter）?里面就可以眨层，如果涉及到需要頁(yè)面加載完成之后的話就用?mounted。

在created的時(shí)候上荡，視圖中的html并沒(méi)有渲染出來(lái)趴樱，所以此時(shí)如果直接去操作html的dom節(jié)點(diǎn)，一定找不到相關(guān)的元素

而在mounted中酪捡，由于此時(shí)html已經(jīng)渲染出來(lái)了叁征，所以可以直接操作dom節(jié)點(diǎn)，（此時(shí)document.getelementById 即可生效了）沛善。