VUE生命周期及業(yè)務(wù)使用場景(總結(jié)篇)

vue 2.0? VS? vue 3.0

beforeCreate? (組件創(chuàng)建前)

// 實例被創(chuàng)建前執(zhí)行
?// 執(zhí)行函數(shù)時 data 和 methods 還沒有被初始化

當前實例主要做了vm實例一些屬性的定義和createElement()方法的封裝(創(chuàng)建前卵牍,訪問不到data當中的屬性以及methods當中的屬性和方法释牺,可以在當前生命周期創(chuàng)建一個loading祭刚,在頁面加載完成之后將loading移除)喜滨。其實在日常開發(fā)中并不常用,描述并不貼切和形象,這篇文章描述的挺詳細的推薦--->>?beforeCreate()前做了什么

created? (組件創(chuàng)建完成)

// 實例被創(chuàng)建之后執(zhí)行
?// 執(zhí)行函數(shù)時data 和 methods 初始化完成。但是模板還未開始編輯
?// 運用場景:1) Ajax 異步數(shù)據(jù)請求 2) 初始化操作

Init (初始化) injections (依賴注入) & reactivity (開始響應(yīng))保檐,一般通過ajax請求初始化數(shù)據(jù)扔亥。? ? ? ? ? ? ? ? ? ? ? ? ? ? ?當前生命周期執(zhí)行的時候會遍歷data中所有的屬性伞鲫,給每一個屬性都添加一個getter、setter方法,將data中的屬性變成一個響應(yīng)式屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當前生命周期執(zhí)行的時候會遍歷data&&methods身上所有的屬性和方法,將這些屬性和方法代理到vue的實例身上  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?在當前生命周期中我們可以進行前后端數(shù)據(jù)的交互(ajax請求)诵肛。推薦--->>vue.js中created方法的使用詳解

beforeMount? (組件掛載之前)

// 實例掛載前執(zhí)行
?// 此時模板已經(jīng)編輯完成到內(nèi)存中薛训。但是還未渲染到 DOM,固頁面未展示

載入前(完成了data和el數(shù)據(jù)初始化),但是頁面中的內(nèi)容還是vue中的占位符,data中的message信息沒有被掛在到Dom節(jié)點中秋麸,在這里可以在渲染前最后一次更改數(shù)據(jù)的機會次乓,不會觸發(fā)其他的鉤子函數(shù),一般可以在這里做初始數(shù)據(jù)的獲取。? ? **注意此時還沒有掛載html到頁面上。

mounted? (組件掛載完成)

// 實例掛載后執(zhí)行
?// 此時已經(jīng)渲染了DOM,可以調(diào)用插件操作 DOM
?// 運用場景:掛載元素內(nèi)dom節(jié)點的獲取。可以配合$.nextTick 使用進行單一事件對數(shù)據(jù)的更新后更新dom

在el 被新創(chuàng)建的 vm.$el 替換工碾,并掛載到實例上去之后調(diào)用端圈。實例已完成以下的配置:用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。

beforeUpdate? (數(shù)據(jù)更新之前,虛擬 DOM 打補丁之前)

// 數(shù)據(jù)更新前執(zhí)行
?// data 數(shù)據(jù)有更新時,內(nèi)存中重新編譯了最新模板字符串,但還未重新渲染DOM

狀態(tài)更新之前調(diào)用。當內(nèi)存中實例的?data?數(shù)據(jù)更新時觸發(fā)。此時內(nèi)存中?data?是最新的,但是還未重新渲染DOM節(jié)點。

updated (數(shù)據(jù)更新之后上荡,虛擬 DOM 渲染完成)

// 數(shù)據(jù)更新后執(zhí)行
?// 已經(jīng)重新渲染 DOM
?// 運用場景:對數(shù)據(jù)更新作統(tǒng)一邏輯業(yè)務(wù)處理

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


待續(xù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末婆咸,一起剝皮案震驚了整個濱河市乖仇,隨后出現(xiàn)的幾起案子警儒,更是在濱河造成了極大的恐慌记劝,老刑警劉巖砍鸠,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件示启,死亡現(xiàn)場離奇詭異舍咖,居然都是意外死亡攻柠,警方通過查閱死者的電腦和手機开睡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人阻课,你說我怎么就攤上這事奋献∏哉猓” “怎么了垒棋?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵乍构,是天一觀的道長。 經(jīng)常有香客問我,道長秸苗,這世上最難降的妖魔是什么惊楼? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮文虏,結(jié)果婚禮上趴久,老公的妹妹穿的比我還像新娘彼棍。我一直安慰自己弛作,他們只是感情好蜘拉,可當我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上熟空,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天,我揣著相機與錄音搞莺,去河邊找鬼息罗。 笑死,一個胖子當著我的面吹牛才沧,可吹牛的內(nèi)容都是我干的迈喉。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼糜工,長吁一口氣:“原來是場噩夢啊……” “哼弊添!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起捌木,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤油坝,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后刨裆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體澈圈,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年帆啃,在試婚紗的時候發(fā)現(xiàn)自己被綠了瞬女。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡努潘,死狀恐怖诽偷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情疯坤,我是刑警寧澤报慕,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站压怠,受9級特大地震影響眠冈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜菌瘫,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一蜗顽、第九天 我趴在偏房一處隱蔽的房頂上張望布卡。 院中可真熱鬧,春花似錦雇盖、人聲如沸忿等。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽这弧。三九已至,卻和暖如春虚汛,著一層夾襖步出監(jiān)牢的瞬間匾浪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工卷哩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蛋辈,地道東北人。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓将谊,卻偏偏與公主長得像冷溶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子尊浓,可洞房花燭夜當晚...
    茶點故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容