vue生命周期

生命周期

定義:

每個 Vue 實例在被創(chuàng)建時都要經(jīng)過從創(chuàng)建倒掛載再到更新鸿脓、卸載的一系列過程勋磕,同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù),可以讓我們用自己注冊的js方法控制整個大局色鸳,在這些事件響應方法中的this直接指向的是vue的實例。

鉤子函數(shù)

beforeCreate

在實例初始化之后舞萄,數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。

created

實例已經(jīng)創(chuàng)建完成之后被調(diào)用管削。在這一步倒脓,實例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運算含思, watch/event 事件回調(diào)崎弃。然而,掛載階段還沒開始含潘,$el 屬性目前不可見饲做。

實例已經(jīng)創(chuàng)建完成,因為它是最早觸發(fā)的原因可以進行一些數(shù)據(jù)遏弱,資源的請求盆均。

beforeMount

在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted

el 被新創(chuàng)建的 vm.$el 替換漱逸,并掛載到實例上去之后調(diào)用該鉤子泪姨。

實例已經(jīng)掛載完成,可以進行一些DOM操作

beforeUpdate

數(shù)據(jù)更新時調(diào)用饰抒,發(fā)生在虛擬 DOM 重新渲染和打補丁之前肮砾。

可以在這個鉤子中進一步地更改狀態(tài),這不會觸發(fā)附加的重渲染過程袋坑。

updated

由于數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁仗处,在這之后會調(diào)用該鉤子。

可以執(zhí)行依賴于 DOM 的操作咒彤。然而在大多數(shù)情況下疆柔,你應該避免在此期間更改狀態(tài),因為這可能會導致更新無限循環(huán)镶柱。該鉤子在服務器端渲染期間不被調(diào)用旷档。

beforeDestroy

實例銷毀之前調(diào)用。在這一步歇拆,實例仍然完全可用鞋屈。

destroyed

Vue 實例銷毀后調(diào)用。調(diào)用后故觅,Vue 實例指示的所有東西都會解綁定厂庇,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀输吏。 該鉤子在服務器端渲染期間不被調(diào)用权旷。

成對比較

  • created 和 beforeCreate
    • A 可以操作數(shù)據(jù) B 數(shù)據(jù)沒有初始化
  • mounted 和 beforeMount
    • A 可以操作DOM B 還未生成DOM
  • updated 和 beforeUpdate
    • A 可以獲取最終數(shù)據(jù) B 可以二次修改
  • 頻繁銷毀創(chuàng)建的組件使用內(nèi)置組件<keep-alive></keep-alive>包裹
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市贯溅,隨后出現(xiàn)的幾起案子拄氯,更是在濱河造成了極大的恐慌躲查,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件译柏,死亡現(xiàn)場離奇詭異镣煮,居然都是意外死亡,警方通過查閱死者的電腦和手機鄙麦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門典唇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人胯府,你說我怎么就攤上這事介衔。” “怎么了盟劫?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵夜牡,是天一觀的道長。 經(jīng)常有香客問我侣签,道長塘装,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任影所,我火速辦了婚禮蹦肴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘猴娩。我一直安慰自己阴幌,他們只是感情好,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布卷中。 她就那樣靜靜地躺著矛双,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蟆豫。 梳的紋絲不亂的頭發(fā)上议忽,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天,我揣著相機與錄音十减,去河邊找鬼栈幸。 笑死,一個胖子當著我的面吹牛帮辟,可吹牛的內(nèi)容都是我干的速址。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼由驹,長吁一口氣:“原來是場噩夢啊……” “哼芍锚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤并炮,失蹤者是張志新(化名)和其女友劉穎蒿赢,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渣触,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年壹若,在試婚紗的時候發(fā)現(xiàn)自己被綠了嗅钻。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡店展,死狀恐怖养篓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赂蕴,我是刑警寧澤柳弄,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站概说,受9級特大地震影響碧注,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜糖赔,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一萍丐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧放典,春花似錦逝变、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至弥臼,卻和暖如春宴咧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背醋火。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工悠汽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人芥驳。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓柿冲,卻偏偏與公主長得像,于是被迫代替她去往敵國和親兆旬。 傳聞我的和親對象是個殘疾皇子假抄,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

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

  • Vue 實例 在文檔中經(jīng)常會使用 vm 這個變量名表示 Vue 實例,在實例化 Vue 時,需要傳入一個選項對象宿饱,...
    鄙人才疏學淺閱讀 577評論 0 1
  • 什么是生命周期熏瞄? Vue實例有一個完整的生命周期,也就是從開始創(chuàng)建谬以、初始化數(shù)據(jù)强饮、編譯模板、掛載Dom为黎、渲染→更新→...
    travelClark閱讀 2,580評論 0 36
  • vue生命周期 每個Vue實例或組件從創(chuàng)建到顯示再到廢棄的過程就是vue的生命周期邮丰。很多時候我們希望能在這個過程中...
    皮皮坤666閱讀 29,108評論 1 18
  • 每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如,需要設置數(shù)據(jù)監(jiān)聽铭乾、編譯模板剪廉、將實例掛載到 DOM ...
    劉圣凱閱讀 900評論 0 1
  • 實例生命周期: beforeCreate:在實例初始化之后,數(shù)據(jù)觀測data observer(props炕檩、dat...
    隔壁老王z閱讀 36,949評論 0 29