vue中的生命週期(一) 初始化

2021-09-24 18:40:33 字數 1956 閱讀 2258

vue的生命週期分為三個階段,分別為: 初始化,執行中, 銷毀,一共8個鉤子函式

注意: 生命週期鉤子函式不允許寫成箭頭函式

vue中的生命週期指的是 元件 從建立到銷毀的乙個過程,在這個過程中,我們在每乙個特定的階段會觸發一些方法( 這些方法具備一些功能),我們給這些方法起了個名字叫做( 生命週期鉤子函式/ 元件鉤子 )

因為我們想在生命週期鉤子中實現專案功能,那麼我們必須知道每乙個鉤子函式的具體用途

元件初始化是生命週期的第乙個階段,我們就以相親來舉例子

>

>

hello

>

div>

"hello"

>

>

>

} p>

div>

template

>

beforecreate ------------ 相親準備前( 爸媽準備, 你根本是局外人 )

vue.

component

('hello',}

,beforecreate()

})newvue

()

執行結果:

1. 元件建立前觸發,目的是為了元件的生命週期 和 元件中的事件做準備

2. 資料沒有獲得,真實dom也沒有渲染出來

3. 可以進行資料請求,提供了一次資料修改的機會

4. 執行一次

created ------------ 爸媽告訴你了,這邊有幾個備選, 選乙個吧

vue.

component

('hello',}

,beforecreate()

,created()

})newvue

()

執行結果:

vue.

component

('hello',}

,beforecreate()

,created()

,beforemount()

})newvue

()

執行結果:

元件掛載前

任務: 判斷el 判斷 template

如果el沒有,那麼我們需要手動掛載,如果有,那麼判斷template

如果template有,那麼進行render函式

如果template沒有,那麼通過 outerhtml 手動書寫模板

資料可以獲得,但是真實dom還沒有渲染

可以進行資料請求,也提供了一次資料修改的機會

執行一次

mounted ------------ 見面

vue.

component

('hello',}

,beforecreate()

,created()

,beforemount()

,mounted()

})newvue

()

執行結果:

元件掛載結束

資料獲得了,真實dom也獲得了

可以進行資料請求,也就可以修改資料

執行了一次

可以進行真實dom的操作了( 可以進行第三方庫的例項化了 )

vue生命週期(一)

vue生命週期 1,什麼叫做生命週期?乙個元件從建立到銷毀的過程叫做生命週期。2,生命週期 beforecreate 建立前 當前生命週期主要做初始化作用,可以在當前生命週期組乙個loading。created 建立後 當前生命週期函式中可以訪問到vm身邊所有的屬性和方法,在當前生命週期函式中會將d...

vue的生命週期,什麼是生命週期

簡而言之 建立前 後,載入前 後,更新前 後,銷毀前 後 beforecreate 建立前 在資料觀測和初始化事件還未開始 created 建立後 完成資料觀測,屬性和方法的運算,初始化事件 beforemount 載入前 在掛載開始之前被呼叫,相關的render函式首次被呼叫。mounted 載入...

VUE中鉤子生命週期

乙個vue會有8個鉤子,data和methods不算,生命週期需要的資料和函式 mounted是元件都載入完成後做事情 例如新增定時器 乙個元件頁面可以正常進行,就已經跑完前4個鉤子了 頁面資料發生變化等就會執行beforeupdate,updata 第7 8 個元件呼叫 destroy 來執行刪除...