小編給大家分享一下vue中有哪些生命周期狀態(tài)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專(zhuān)注網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)推廣，域名申請(qǐng)，虛擬空間，網(wǎng)站改版維護(hù)有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問(wèn)題，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)公司。

vue的八大生命周期狀態(tài)：1、beforeCreate；2、created；3、beforeMount；4、mounted；5、beforeUpdate；6、updated；7、beforeDestroy；8、destroyed。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vue.js生命周期的八大狀態(tài)：

1、beforeCreate（創(chuàng)建前）：vue實(shí)例初始化之前調(diào)用

此階段為實(shí)例初始化之后，此時(shí)的數(shù)據(jù)觀察和事件配置都還沒(méi)有準(zhǔn)備好，而此時(shí)的實(shí)例中的data和el還是underfined狀態(tài)，不可用的，dom元素也未加載,此時(shí)使用html片段代碼我們加上ref屬性，用于獲取DOM元素的操作會(huì)報(bào)錯(cuò)，詳細(xì)效果請(qǐng)使用代碼測(cè)試。

2、created（創(chuàng)建后）：vue實(shí)例初始化之后調(diào)用

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

3、beforeMount（載入前）：掛載到DOM樹(shù)之前調(diào)用

此時(shí)的$el成功關(guān)聯(lián)到我們指定的DOM節(jié)點(diǎn)，但是此時(shí)的DOM元素還未加載，如果此時(shí)在DOM元素中綁定數(shù)據(jù)使用{{name}}后里邊的name不能成功地渲染出我們data中的數(shù)據(jù)

4、mounted（載入后）：掛載到DOM樹(shù)之后調(diào)用

掛載完畢階段，到了這個(gè)階段數(shù)據(jù)就會(huì)被成功渲染出來(lái)。DOM元素也加載出來(lái)了，html片段代碼我們加上ref屬性，可以獲取DOM元素。

5、beforeUpdate（更新前）：數(shù)據(jù)更新之前調(diào)用

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

6、updated（更新后）：數(shù)據(jù)更新之后調(diào)用

此階段為更新渲染視圖之后，此時(shí)再讀取視圖上的內(nèi)容，已經(jīng)是最新的內(nèi)容。 此時(shí)加載的DOM元素上的數(shù)據(jù)更新了。

7、beforeDestroy（銷(xiāo)毀前）：vue實(shí)例銷(xiāo)毀之前調(diào)用

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

8、destroyed（銷(xiāo)毀后）：vue實(shí)例銷(xiāo)毀之后調(diào)用

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

下面是官方文檔里的生命周期圖

以上是“vue中有哪些生命周期狀態(tài)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！