Vue 2.0生命周期和鉤子函數(shù)的一些理解

  • 概述
    vue用了一陣子塞赂,對(duì)鉤子函數(shù)和生命周期只是停留在簡(jiǎn)單的使用方库,不曉得為什么吕嘀,接下來(lái)將更深入的了解一下,話不多說(shuō)翎卓,走起
  • Vue的生命周期簡(jiǎn)介
    生命周期.png

    lifecycle.png
  • 其實(shí)吧契邀,生命周期可以簡(jiǎn)單分為8部分
    beforeCreate(創(chuàng)建前),
    created(創(chuàng)建后),
    beforeMount(載入前),
    mounted(載入后),
    beforeUpdate(更新前),
    updated(更新后),
    beforeDestroy(銷毀前),
    destroyed(銷毀后)
  • 話不多說(shuō) 上代碼
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       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 () {
            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 () {
            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); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態(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); 
        },
        updated: function () {
            console.group('updated 更新完成狀態(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); 
        },
        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)
        }
    })
</script>
</body>
</html>  

打開(kāi)瀏覽器控制臺(tái),會(huì)發(fā)現(xiàn)

beforecreate:el和data并未初始化
created:完成了data數(shù)據(jù)的初始化莲祸,el沒(méi)有
beforeMount :完成了el和data的初始化
mounted :完成了掛載
我們經(jīng)常說(shuō)的先挖坑蹂安,其實(shí)是vue虛擬dom,在mounted時(shí)才填坑的
update : 當(dāng)我們使用其他方法修改了數(shù)據(jù)锐帜,vue會(huì)觸發(fā)update
destroy : 使用destroy之后田盈,dom仍然存在,但是不受vue控制了

  • 常見(jiàn)鉤子函數(shù)的使用

beforecreate : 舉個(gè)栗子:可以在這加個(gè)loading事件
created :在這結(jié)束loading缴阎,還做一些初始化允瞧,實(shí)現(xiàn)函數(shù)自執(zhí)行,也可以向后臺(tái)請(qǐng)求數(shù)據(jù)
mounted : 在這發(fā)起后端請(qǐng)求,拿回?cái)?shù)據(jù),配合路由鉤子做一些事情
beforeDestory: 你確認(rèn)刪除XX嗎述暂?
destoryed :當(dāng)前組件已被刪除痹升,清空相關(guān)內(nèi)容

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市畦韭,隨后出現(xiàn)的幾起案子疼蛾,更是在濱河造成了極大的恐慌,老刑警劉巖艺配,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件察郁,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡转唉,警方通過(guò)查閱死者的電腦和手機(jī)皮钠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)赠法,“玉大人麦轰,你說(shuō)我怎么就攤上這事∽┲” “怎么了款侵?”我有些...
    開(kāi)封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)侧纯。 經(jīng)常有香客問(wèn)我喳坠,道長(zhǎng),這世上最難降的妖魔是什么茂蚓? 我笑而不...
    開(kāi)封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任壕鹉,我火速辦了婚禮,結(jié)果婚禮上聋涨,老公的妹妹穿的比我還像新娘晾浴。我一直安慰自己,他們只是感情好牍白,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布脊凰。 她就那樣靜靜地躺著,像睡著了一般茂腥。 火紅的嫁衣襯著肌膚如雪狸涌。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天最岗,我揣著相機(jī)與錄音帕胆,去河邊找鬼。 笑死般渡,一個(gè)胖子當(dāng)著我的面吹牛懒豹,可吹牛的內(nèi)容都是我干的芙盘。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼脸秽,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼儒老!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起记餐,我...
    開(kāi)封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤驮樊,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后片酝,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體巩剖,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年钠怯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片曙聂。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡晦炊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宁脊,到底是詐尸還是另有隱情断国,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布榆苞,位于F島的核電站稳衬,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏坐漏。R本人自食惡果不足惜薄疚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望赊琳。 院中可真熱鬧街夭,春花似錦、人聲如沸躏筏。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)趁尼。三九已至埃碱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間酥泞,已是汗流浹背砚殿。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芝囤,地道東北人瓮具。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓荧飞,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親名党。 傳聞我的和親對(duì)象是個(gè)殘疾皇子叹阔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • Vue 框架的入口就是 Vue 實(shí)例,其實(shí)就是框架中的 view model 传睹,它包含頁(yè)面中的業(yè)務(wù) 處理邏輯耳幢、數(shù)據(jù)...
    云中一樵夫閱讀 1,092評(píng)論 0 1
  • 由于暑假團(tuán)隊(duì)用vue做項(xiàng)目時(shí),用到的鉤子函數(shù)也只有mounted欧啤,(部分如下)睛藻,主要是用來(lái)向后臺(tái)請(qǐng)求數(shù)據(jù)。 其他...
    KlausXu閱讀 803評(píng)論 0 2
  • Vue 框架的入口就是 Vue 實(shí)例邢隧,其實(shí)就是框架中的 view model 店印,它包含頁(yè)面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模...
    阿根廷斗牛閱讀 911評(píng)論 0 2
  • Vue 實(shí)例中的生命周期鉤子 本博客版權(quán)歸本人和饑人谷所有倒慧,轉(zhuǎn)載需說(shuō)明來(lái)源Vue 框架的入口就是 Vue 實(shí)例按摘,其...
    饑人谷_小k閱讀 2,491評(píng)論 2 7
  • 古詩(shī).大雅久不作-李白 大雅久不作,吾衰竟誰(shuí)陳纫谅? 王風(fēng)委蔓草炫贤。戰(zhàn)國(guó)多荊榛。 龍虎相啖食付秕。兵戈逮狂秦兰珍。 正聲何微茫。...
    走在邊緣閱讀 145評(píng)論 2 1