生命周期桂对、鉤子函數(shù)小記

每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如,需要設(shè)置數(shù)據(jù)監(jiān)聽鸠匀、編譯模板蕉斜、

將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)

1. new Vue() 創(chuàng)建vue實例

? 2. Init Events & Lifecycle 初始化 事件 和 生命周期

Lifecycle Hocks 1: beforeCreate? 創(chuàng)建前的狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? 3.Init (初始化) injections (依賴注入) & reactivity (開始響應(yīng))? ? ? ? ? ? ? ?

Lifecycle Hocks 2:created 創(chuàng)建完畢狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? 4. 'el','template', 'render function' or 'as template' 是否有元素el缀棍,? ? ? ?

是否有模板宅此,是否渲染到了函數(shù)內(nèi),是否作為模板進行了outerHTML渲染到了頁面? ? ?

? Lifecycle Hocks 3:beforeMount 掛載前狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? 5. Create app.$el and replace 'el' with it 掛載我們的"#app"

并且還是把我們的‘#app’生成虛擬DOM爬范,生成完畢后并渲染到view層父腕。

? Lifecycle Hocks 4:mounted 掛載結(jié)束狀態(tài)

? 6. when data changes 當我們的數(shù)據(jù)發(fā)生了改變

? Lifecycle Hocks 5:beforeUpdate beforeUpdate 更新前狀態(tài)

? 7.Virtual DOM re-render and patch? 虛擬Dom重渲染

? Lifecycle Hocks 6:updated 更新完成狀態(tài)

beforecreate:el 和 data 并未初始化

created:完成了 data 數(shù)據(jù)的初始化,el沒有

beforeMount:完成了 el 和 data 初始化,虛擬DOM渲染

mounted :完成掛載 掛載到真正的DOM上


以上只是理解青瀑,那上代碼:

beforeCreate: function () {

? ? ? ? ? ? console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');

? ? ? ? ? ? console.log("%c%s", "color:red" , "el? ? : " + this.$el); //undefined

? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //undefined

? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message)

? ? ? ? },

? ? ? ? created: function () {? //請求后臺數(shù)據(jù)放在此鉤子函數(shù)下

? ? ? ? ? ? console.group('created 創(chuàng)建完畢狀態(tài)===============》');

? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el); //undefined

? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //已被初始化

? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message); //已被初始化

? ? ? ? },

? ? ? ? beforeMount: function () {

? ? ? ? ? ? console.group('beforeMount 掛載前狀態(tài)===============》');

? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + (this.$el)); //已被初始化

? ? ? ? ? ? console.log(this.$el);

? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //已被初始化

? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message); //已被初始化

? ? ? ? },

? ? ? ? mounted: function () {? //在此鉤子函數(shù)下可以操作DOM了

? ? ? ? ? ? console.group('mounted 掛載結(jié)束狀態(tài)===============》');

? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el); //已被初始化

? ? ? ? ? ? console.log(this.$el);

? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data); //已被初始化

? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message); //已被初始化

? ? ? ? },

? ? ? ? // 下面就能看到data里的值被修改后璧亮,將會觸發(fā)update的操作。

? ? ? ? beforeUpdate: function() {

? ? ? ? ? console.group('beforeUpdate 更新前狀態(tài)===============》');

? ? ? ? ? console.log("%c%s", "color:red", "el? ? : " + this.$el.innerHTML);

? ? ? ? ? console.log(this.$el);

? ? ? ? ? console.log("%c%s", "color:red", "data? : " + JSON.stringify(this.$data));

? ? ? ? ? console.log("%c%s", "color:red", "message: " + this.message);

? ? ? ? ? console.groupEnd();

? ? ? ? },

? ? ? ? updated: function() {

? ? ? ? ? console.group('updated 更新完成狀態(tài)===============》');

? ? ? ? ? console.log("%c%s", "color:red", "el? ? : " + this.$el.innerHTML);

? ? ? ? ? console.log(this.$el);

? ? ? ? ? console.log("%c%s", "color:red", "data? : " + JSON.stringify(this.$data));

? ? ? ? ? console.log("%c%s", "color:red", "message: " + this.message);

? ? ? ? ? console.groupEnd();

? ? ? ? },

? ? ? ? // 我們在console里執(zhí)行下命令對 vue實例進行銷毀斥难。

? ? ? ? // 執(zhí)行命令:app.$destroy()

? ? ? ? // 銷毀完成后杜顺,我們再重新改變message的值,vue不再對此動作進行響應(yīng)了蘸炸。

? ? ? ? // 但是原先生成的dom元素還存在躬络,可以這么理解,執(zhí)行了destroy操作搭儒,后續(xù)就不再受vue控制了穷当。

? ? ? ? beforeDestroy: function () {

? ? ? ? ? ? console.group('beforeDestroy 銷毀前狀態(tài)===============》');

? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el);

? ? ? ? ? ? console.log(this.$el);

? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data);

? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message);

? ? ? ? },

? ? ? ? destroyed: function () {

? ? ? ? ? ? console.group('destroyed 銷毀完成狀態(tài)===============》');

? ? ? ? ? ? console.log("%c%s", "color:red","el? ? : " + this.$el);

? ? ? ? ? ? console.log(this.$el);

? ? ? ? ? ? console.log("%c%s", "color:red","data? : " + this.$data);

? ? ? ? ? ? console.log("%c%s", "color:red","message: " + this.message)

? ? ? ? }

? ? })

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市淹禾,隨后出現(xiàn)的幾起案子馁菜,更是在濱河造成了極大的恐慌,老刑警劉巖铃岔,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汪疮,死亡現(xiàn)場離奇詭異,居然都是意外死亡毁习,警方通過查閱死者的電腦和手機智嚷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纺且,“玉大人盏道,你說我怎么就攤上這事≡芈担” “怎么了猜嘱?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵衅枫,是天一觀的道長。 經(jīng)常有香客問我朗伶,道長弦撩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任论皆,我火速辦了婚禮益楼,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘纯丸。我一直安慰自己偏形,他們只是感情好,可當我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布觉鼻。 她就那樣靜靜地躺著嚣艇,像睡著了一般邪驮。 火紅的嫁衣襯著肌膚如雪鸿摇。 梳的紋絲不亂的頭發(fā)上剩岳,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天,我揣著相機與錄音仇矾,去河邊找鬼庸蔼。 笑死,一個胖子當著我的面吹牛贮匕,可吹牛的內(nèi)容都是我干的姐仅。 我是一名探鬼主播,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼刻盐,長吁一口氣:“原來是場噩夢啊……” “哼掏膏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起敦锌,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤馒疹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后乙墙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體颖变,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年听想,在試婚紗的時候發(fā)現(xiàn)自己被綠了腥刹。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡哗魂,死狀恐怖肛走,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情录别,我是刑警寧澤朽色,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站梢褐,受9級特大地震影響赵讯,放射性物質(zhì)發(fā)生泄漏鱼响。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一厌均、第九天 我趴在偏房一處隱蔽的房頂上張望晶密。 院中可真熱鬧,春花似錦连锯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至桶蛔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背脑融。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工妓布, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留捂龄,地道東北人。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓扑浸,卻偏偏與公主長得像杭跪,于是被迫代替她去往敵國和親系奉。 傳聞我的和親對象是個殘疾皇子姑廉,可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2 355

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