
beforeCreate? (組件創(chuàng)建前)
// 實(shí)例被創(chuàng)建前執(zhí)行
?// 執(zhí)行函數(shù)時 data 和 methods 還沒有被初始化
當(dāng)前實(shí)例主要做了vm實(shí)例一些屬性的定義和createElement()方法的封裝(創(chuàng)建前,訪問不到data當(dāng)中的屬性以及methods當(dāng)中的屬性和方法,可以在當(dāng)前生命周期創(chuàng)建一個loading,在頁面加載完成之后將loading移除)。其實(shí)在日常開發(fā)中并不常用,描述并不貼切和形象,這篇文章描述的挺詳細(xì)的推薦--->>?beforeCreate()前做了什么
created? (組件創(chuàng)建完成)
// 實(shí)例被創(chuàng)建之后執(zhí)行
?// 執(zhí)行函數(shù)時data 和 methods 初始化完成。但是模板還未開始編輯
?// 運(yùn)用場景:1) Ajax 異步數(shù)據(jù)請求 2) 初始化操作
Init (初始化) injections (依賴注入) & reactivity (開始響應(yīng)),一般通過ajax請求初始化數(shù)據(jù)。? ? ? ? ? ? ? ? ? ? ? ? ? ? ?當(dāng)前生命周期執(zhí)行的時候會遍歷data中所有的屬性,給每一個屬性都添加一個getter、setter方法,將data中的屬性變成一個響應(yīng)式屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)前生命周期執(zhí)行的時候會遍歷data&&methods身上所有的屬性和方法,將這些屬性和方法代理到vue的實(shí)例身上 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?在當(dāng)前生命周期中我們可以進(jìn)行前后端數(shù)據(jù)的交互(ajax請求)。推薦--->>vue.js中created方法的使用詳解
beforeMount? (組件掛載之前)
// 實(shí)例掛載前執(zhí)行
?// 此時模板已經(jīng)編輯完成到內(nèi)存中。但是還未渲染到 DOM,固頁面未展示
載入前(完成了data和el數(shù)據(jù)初始化),但是頁面中的內(nèi)容還是vue中的占位符,data中的message信息沒有被掛在到Dom節(jié)點(diǎn)中,在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會,不會觸發(fā)其他的鉤子函數(shù),一般可以在這里做初始數(shù)據(jù)的獲取。? ? **注意此時還沒有掛載html到頁面上。
mounted? (組件掛載完成)
// 實(shí)例掛載后執(zhí)行
?// 此時已經(jīng)渲染了DOM,可以調(diào)用插件操作 DOM
?// 運(yùn)用場景:掛載元素內(nèi)dom節(jié)點(diǎn)的獲取??梢耘浜?.nextTick 使用進(jìn)行單一事件對數(shù)據(jù)的更新后更新dom

在el 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用。實(shí)例已完成以下的配置:用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進(jìn)行ajax交互。
beforeUpdate? (數(shù)據(jù)更新之前,虛擬 DOM 打補(bǔ)丁之前)
// 數(shù)據(jù)更新前執(zhí)行
?// data 數(shù)據(jù)有更新時,內(nèi)存中重新編譯了最新模板字符串,但還未重新渲染DOM
狀態(tài)更新之前調(diào)用。當(dāng)內(nèi)存中實(shí)例的?data?數(shù)據(jù)更新時觸發(fā)。此時內(nèi)存中?data?是最新的,但是還未重新渲染DOM節(jié)點(diǎn)。
updated (數(shù)據(jù)更新之后,虛擬 DOM 渲染完成)
// 數(shù)據(jù)更新后執(zhí)行
?// 已經(jīng)重新渲染 DOM
?// 運(yùn)用場景:對數(shù)據(jù)更新作統(tǒng)一邏輯業(yè)務(wù)處理
在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時,組件DOM已經(jīng)更新,所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下,應(yīng)該避免在此期間更改狀態(tài),因?yàn)檫@可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
待續(xù)