Vue生命周期區別詳解

生命周期分類(lèi)

vue每個(gè)組件都是獨立的，每個(gè)組件都有一個(gè)屬于它的生命周期，

從一個(gè)組件創(chuàng )建、數據初始化、掛載、更新、銷(xiāo)毀，這就是一個(gè)組件所謂的生命周期。
在組件中具體的方法有:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

beforeCreate( 創(chuàng )建前 )

在實(shí)例初始化之后，數據觀(guān)測和事件配置之前被調用，此時(shí)組件的選項對象還未創(chuàng )建，el 和 data 并未初始化，因此無(wú)法訪(fǎng)問(wèn)methods，
data， computed等上的方法和數據。

created ( 創(chuàng )建后 ）

實(shí)例已經(jīng)創(chuàng )建完成之后被調用，在這一步，實(shí)例已完成以下配置：數據觀(guān)測、屬性和方法的運算，watch/event事件回調，完成了data 數據的初始化，el沒(méi)有。 然而，掛在階段還沒(méi)有開(kāi)始, $el屬性目前不可見(jiàn)，這是一個(gè)常用的生命周期，因為你可以調用methods中的方法，改變data中的數據，并且修改可以通過(guò)vue的響應式綁定體現在頁(yè)面上，，獲取computed中的計算屬性等等，通常我們可以在這里對實(shí)例進(jìn)行預處理

beforeMount（掛載前）

掛在開(kāi)始之前被調用，相關(guān)的render函數首次被調用（虛擬DOM），實(shí)例已完成以下的配置： 編譯模板，把data里面的數據和模板生成html，完成了el和data 初始化，注意此時(shí)還沒(méi)有掛在html到頁(yè)面上。

mounted（掛載后）

掛在完成，也就是模板中的HTML渲染到HTML頁(yè)面中，此時(shí)一般可以做一些ajax操作，mounted只會(huì )執行一次。

beforeUpdate（更新前）

在數據更新之前被調用，發(fā)生在虛擬DOM重新渲染和打補丁之前，可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì )觸發(fā)附加地重渲染過(guò)程

updated（更新后）

在由于數據更改導致地虛擬DOM重新渲染和打補丁只會(huì )調用，調用時(shí)，組件DOM已經(jīng)更新，所以可以執行依賴(lài)于DOM的操作，然后在大多是情況下，應該避免在此期間更改狀態(tài)，因為這可能會(huì )導致更新無(wú)限循環(huán)，該鉤子在服務(wù)器端渲染期間不被調用

beforeDestroy（銷(xiāo)毀前）

在實(shí)例銷(xiāo)毀之前調用，實(shí)例仍然完全可用，
這一步還可以用this來(lái)獲取實(shí)例，
一般在這一步做一些重置的操作，比如清除掉組件中的定時(shí)器 和 監聽(tīng)的dom事件

destroyed（銷(xiāo)毀后）

在實(shí)例銷(xiāo)毀之后調用，調用后，所以的事件監聽(tīng)器會(huì )被移出，所有的子實(shí)例也會(huì )被銷(xiāo)毀，該鉤子在服務(wù)器端渲染期間不被調用
vue實(shí)例已經(jīng)解除了事件監聽(tīng)以及dom的綁定，但是dom結構依然存在

執行順序（圖示）

到此這篇關(guān)于Vue生命周期區別詳解的文章就介紹到這了,更多相關(guān)Vue生命周期內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！