Vue (2.x)生命周期

注: 本文摘抄自vue官網(wǎng),侵刪姻几。

生命周期圖示

vue官網(wǎng)的生命周期圖示如下


生命周期圖示

生命周期鉤子

所有生命周期鉤子自動綁定this上下文的實例中宜狐,因此你可以訪問數(shù)據(jù)、對象屬性和方法進(jìn)行運算蛇捌。這意味著你不能使用箭頭函數(shù)來定義生命周期方法(例如:created:()=>this.fetchTodos())抚恒。

  • beforeCreate
    在實例初始化之后,數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用络拌。
  • created
    在實例創(chuàng)建完成后被立即調(diào)用俭驮。在這一步,實例已完成以下的配置:數(shù)據(jù)觀測 (data observer)春贸,屬性和方法的運算混萝,watch/event 事件回調(diào)。然而萍恕,掛載階段還沒開始逸嘀,$el 屬性目前不可見。
  • beforeMount
    在掛載之前調(diào)用:相關(guān)的render函數(shù)第一次調(diào)用允粤。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用崭倘。
  • mounted
    el 被新創(chuàng)建的vm.$el 替換,并掛載到實例上去之后調(diào)用該鉤子类垫。如果 root 實例掛載了一個文檔內(nèi)元素司光,當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。
    注意 mounted不會承諾所有的子組件也都一起被掛載如果你希望等到整個視圖都渲染完畢悉患,可以使用vm.$nextTick 替換mounted:
mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the entire view has been rendered
  })
}

該鉤子在服務(wù)器端渲染期間不被調(diào)用残家。

  • beforeUpdate
    數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬 DOM 打補(bǔ)丁之前购撼。這里適合在更新之前訪問現(xiàn)有的 DOM跪削,比如手動移除已添加的事件監(jiān)聽器。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用迂求,因為只有初次渲染會在服務(wù)端進(jìn)行碾盐。
  • updated
    由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁,在這之后會調(diào)用該鉤子揩局。
    當(dāng)這個鉤子被調(diào)用時毫玖,組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下付枫,你應(yīng)該避免在此期間更改狀態(tài)烹玉。如果要相應(yīng)狀態(tài)改變,通常最好使用計算屬性或 watcher取而代之阐滩。
    注意 updated不會承諾所有的子組件也都一起被重繪二打。如果你希望等到整個視圖都重繪完畢,可以用 vm.$nextTick替換掉 updated掂榔。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用
  • beforeDestroy
    實例銷毀之前調(diào)用继效。在這一步,實例仍然完全可用装获。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用瑞信。
  • destroyed
    Vue 實例銷毀后調(diào)用。調(diào)用后穴豫,Vue 實例指示的所有東西都會解綁定凡简,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀精肃。
    該鉤子在服務(wù)器端渲染期間不被調(diào)用秤涩。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市司抱,隨后出現(xiàn)的幾起案子溉仑,更是在濱河造成了極大的恐慌,老刑警劉巖状植,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浊竟,死亡現(xiàn)場離奇詭異,居然都是意外死亡津畸,警方通過查閱死者的電腦和手機(jī)振定,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肉拓,“玉大人后频,你說我怎么就攤上這事∨荆” “怎么了卑惜?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長驻售。 經(jīng)常有香客問我露久,道長,這世上最難降的妖魔是什么欺栗? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任毫痕,我火速辦了婚禮征峦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘消请。我一直安慰自己栏笆,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布臊泰。 她就那樣靜靜地躺著蛉加,像睡著了一般。 火紅的嫁衣襯著肌膚如雪缸逃。 梳的紋絲不亂的頭發(fā)上七婴,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機(jī)與錄音察滑,去河邊找鬼。 笑死修肠,一個胖子當(dāng)著我的面吹牛贺辰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嵌施,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼饲化,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吗伤?” 一聲冷哼從身側(cè)響起吃靠,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎足淆,沒想到半個月后巢块,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡巧号,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年族奢,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丹鸿。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡越走,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出靠欢,到底是詐尸還是另有隱情廊敌,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布门怪,位于F島的核電站骡澈,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏掷空。R本人自食惡果不足惜秧廉,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一伞广、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧疼电,春花似錦嚼锄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至修陡,卻和暖如春沧侥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背魄鸦。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工宴杀, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人拾因。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓旺罢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親绢记。 傳聞我的和親對象是個殘疾皇子扁达,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

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