Vue生命周期

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestory

destoryed


1. 在beforeCreate和created鉤子函數(shù)之間的生命周期

在這個(gè)生命周期之間筹我,進(jìn)行初始化事件您朽,進(jìn)行數(shù)據(jù)的觀測忿危,可以看到在created的時(shí)候數(shù)據(jù)已經(jīng)和data屬性進(jìn)行綁定(放在data中的屬性當(dāng)值發(fā)生改變的同時(shí),視圖也會改變)游岳。

注意看下:此時(shí)還是沒有el選項(xiàng)

2. created鉤子函數(shù)和beforeMount間的生命周期

在這一階段發(fā)生的事情還是比較多的。

首先會判斷對象是否有el選項(xiàng)夹厌。如果有的話就繼續(xù)向下編譯稽揭,如果沒有el選項(xiàng),則停止編譯浪蹂,也就意味著停止了生命周期抵栈,直到在該vue實(shí)例上調(diào)用vm.$mount(el)。

此時(shí)注釋掉el

created停止


template參數(shù)選項(xiàng)的有無對生命周期的影響坤次。

(1).如果vue實(shí)例對象中有template參數(shù)選項(xiàng)古劲,則將其作為模板編譯成render函數(shù)。

(2).如果沒有template選項(xiàng)缰猴,則將外部HTML作為模板編譯产艾。

(3).可以看到template中的模板優(yōu)先級要高于outer HTML的優(yōu)先級。

render函數(shù)選項(xiàng) > template選項(xiàng) > outer HTML.

3. beforeMount和mounted 鉤子函數(shù)間的生命周期

此時(shí)是給vue實(shí)例對象添加$el成員滑绒,并且替換掉掛在的DOM元素闷堡。

4. mounted


在mounted之前h1中還是通過{{message}}進(jìn)行占位的,因?yàn)榇藭r(shí)還有掛在到頁面上疑故,還是JavaScript中的虛擬DOM形式存在的杠览。在mounted之后可以看到h1中的內(nèi)容發(fā)生了變化。

5. beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期

當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變纵势,會觸發(fā)對應(yīng)組件的重新渲染踱阿,先后調(diào)用beforeUpdate和updated鉤子函數(shù)管钳。



6.beforeDestroy和destroyed鉤子函數(shù)間的生命周期

beforeDestroy鉤子函數(shù)在實(shí)例銷毀之前調(diào)用。在這一步软舌,實(shí)例仍然完全可用才漆。

destroyed鉤子函數(shù)在Vue 實(shí)例銷毀后調(diào)用。調(diào)用后葫隙,Vue 實(shí)例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除躏仇,所有的子實(shí)例也會被銷毀恋脚。


引用:https://segmentfault.com/a/1190000011381906

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市焰手,隨后出現(xiàn)的幾起案子糟描,更是在濱河造成了極大的恐慌,老刑警劉巖书妻,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件船响,死亡現(xiàn)場離奇詭異,居然都是意外死亡躲履,警方通過查閱死者的電腦和手機(jī)见间,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來工猜,“玉大人米诉,你說我怎么就攤上這事∨袼В” “怎么了史侣?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長魏身。 經(jīng)常有香客問我惊橱,道長,這世上最難降的妖魔是什么箭昵? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任税朴,我火速辦了婚禮,結(jié)果婚禮上家制,老公的妹妹穿的比我還像新娘掉房。我一直安慰自己,他們只是感情好慰丛,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布卓囚。 她就那樣靜靜地躺著,像睡著了一般诅病。 火紅的嫁衣襯著肌膚如雪哪亿。 梳的紋絲不亂的頭發(fā)上粥烁,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天,我揣著相機(jī)與錄音蝇棉,去河邊找鬼讨阻。 笑死,一個(gè)胖子當(dāng)著我的面吹牛篡殷,可吹牛的內(nèi)容都是我干的钝吮。 我是一名探鬼主播,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼板辽,長吁一口氣:“原來是場噩夢啊……” “哼奇瘦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起劲弦,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤耳标,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后邑跪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體次坡,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年画畅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了砸琅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,567評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡轴踱,死狀恐怖明棍,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情寇僧,我是刑警寧澤摊腋,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站嘁傀,受9級特大地震影響兴蒸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜细办,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一橙凳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧笑撞,春花似錦岛啸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至瓤狐,卻和暖如春瞬铸,著一層夾襖步出監(jiān)牢的瞬間批幌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工嗓节, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留荧缘,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓拦宣,卻偏偏與公主長得像截粗,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子鸵隧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,585評論 2 359

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

  • 涉及到鉤子函數(shù)有:1)beforeCreate绸罗;2)created;3)beforeMount掰派;4)mounted...
    puxiaotaoc閱讀 12,743評論 1 10
  • 參照翻譯 Understanding Vue.js Lifecycle Hooks 理解組件的生命周期从诲,有利于我們...
    bacbcc94613b閱讀 5,073評論 0 6
  • Vue官方生命周期圖每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如左痢,需要設(shè)置數(shù)據(jù)監(jiān)聽靡羡、編譯模板、將...
    ChangLau閱讀 217評論 0 0
  • 先上圖 遇到的一個(gè)問題 在我的項(xiàng)目中俊性,常用的生命周期鉤子函數(shù)一直都是mounted略步,對于大部分情況,都是屢試不爽定页、...
    任無名F閱讀 41,706評論 10 50
  • vue生命周期簡介 咱們從上圖可以很明顯的看出現(xiàn)在vue2.0都包括了哪些生命周期的函數(shù)了趟薄。 生命周期探究 對于執(zhí)...
    余生LHX閱讀 700評論 0 3