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 來執行刪除...