Vue生命周期是什么

<p id="app">
　　{{name}}
</p>

Vue把整個(gè)生命周期劃分為創(chuàng)建、掛載、更新、銷毀等階段，每一個(gè)階段都會(huì)給一些‘鉤子’讓我們來(lái)做一些我們想實(shí)現(xiàn)的動(dòng)作。學(xué)習(xí)實(shí)例的生命周期，能幫助我們理解vue實(shí)例的運(yùn)行機(jī)制，更好地合理利用各個(gè)鉤子來(lái)完成我們的業(yè)務(wù)代碼。

1.beforeCreate：此階段為實(shí)例初始化之后，此時(shí)的數(shù)據(jù)觀察和事件配置都還沒(méi)有準(zhǔn)備好，而此時(shí)的實(shí)例中的data和el還是underfined狀態(tài)，不可用的

2.createD： beforeCreate之后緊接著的鉤子就是創(chuàng)建完畢created，此時(shí)我們能讀取到data的值，但是DOM還沒(méi)有生成，所以屬性el還是不存在的。

3.beforeMount：此時(shí)的$el成功關(guān)聯(lián)到我們指定的DOM節(jié)點(diǎn)<p id="app">{{name}}</p>,但此時(shí){{}}里邊的name還沒(méi)有唄成功地渲染成我們DATA中的數(shù)據(jù)。

4.mounted：掛載完畢階段，到了這個(gè)階段數(shù)據(jù)就會(huì)被成功渲染出來(lái)。

5.beforeUpdate：當(dāng)修改Vue實(shí)例的data時(shí)，Vue就會(huì)自動(dòng)幫我們更新渲染視圖，在這個(gè)過(guò)程中，Vue提供了beforeUpdate的鉤子給我們，在檢測(cè)到我們要修改數(shù)據(jù)的時(shí)候，更新渲染視圖之前就會(huì)觸發(fā)鉤子beforeUpdate。html片段代碼我們加上ref屬性，用于獲取DOM元素。

beforeUpdate(){
　　　　let name = this.$refs.app.innerHTML;
　　}

　　而在此階段，視圖并未重新渲染更新。

6.updated：此階段為更新渲染視圖之后，此時(shí)再讀取視圖上的內(nèi)容，已經(jīng)是最新的內(nèi)容。

　　updated(){
　　　　let name = this.$refs.app.innerHTML;
　　},

7.beforeDestroy：調(diào)用實(shí)例的destroy()方法可以銷毀當(dāng)前的組件，在銷毀之前，會(huì)觸發(fā)beforeDestroy鉤子。

8.destroyed：成功銷毀之后，會(huì)觸發(fā)destroyed鉤子，此時(shí)該實(shí)例與其他實(shí)例的關(guān)聯(lián)已經(jīng)被清除，它與視圖之間也被解綁，此時(shí)再修改name的值，試圖不在更新，說(shuō)明實(shí)例成功被銷毀了。

以上就是Vue生命周期是什么的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！