Vue2.0探索之路——生命周期和鉤子函數(shù)的一些理解_第1頁(yè)
Vue2.0探索之路——生命周期和鉤子函數(shù)的一些理解_第2頁(yè)
Vue2.0探索之路——生命周期和鉤子函數(shù)的一些理解_第3頁(yè)
Vue2.0探索之路——生命周期和鉤子函數(shù)的一些理解_第4頁(yè)
Vue2.0探索之路——生命周期和鉤子函數(shù)的一些理解_第5頁(yè)
免費(fèi)預(yù)覽已結(jié)束，剩余7頁(yè)可下載查看

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、Vue2.0探索之路一一生命周期和鉤子函數(shù)的 一些理解在使用VUe-個(gè)多禮拜后，感覺(jué)現(xiàn)在還停留在初級(jí)階段，雖然知道怎么和后端 做數(shù)據(jù)交互，但是對(duì)于mounted這個(gè)掛載還不是很清楚的。放大之，對(duì)VUe的生 命周期不其了解。只知道簡(jiǎn)單的使用，而不知道為什么，這對(duì)后面的踩坑是相當(dāng) 不利的。因?yàn)槲覀冇袝r(shí)候會(huì)在兒個(gè)鉤子函數(shù)里做一些事情，什么時(shí)候做，在哪個(gè)函數(shù)里做, 我們不清楚。于是我開(kāi)始先去搜索，發(fā)現(xiàn)vue2.0的生命周期沒(méi)啥文章。大多是1.0的版本介 紹。最后還是找到一篇不錯(cuò)的（會(huì)放在最后）VUe生命周期簡(jiǎn)介new VU«()NolWhOnY-Cn.mownM<H)U CalIPd.

2、ICM1：:廠t«mUbprQptn?ILifeCyCle hooks生命周期圍子應(yīng)該Jl VUe這次升級(jí)中broken ChangeS JS多的一田分了，對(duì)照1.0的文檔和release note,作了下面這張裏VUe 1.0*VUe 2.0DeSCriPtiOninitbeforeCreate組件實(shí)例剛被創(chuàng)if組件屬性計(jì)算之前，MldetaS性等CreatedCreated組件實(shí)例創(chuàng)樓完成.Jli性已綁定.但DoM還未生成.JeI JS性還不存在boforeC<xnpilebeforeMount摂板編譯仍載之前mpiledmounted摸板«1541«之

3、后readymounted樓板編譯/掛放之后（不保證組件已在document中）boforollpdato組件更新之前UPdated組件更新之后actuatedfor keep-alive .組件被漱活阿調(diào)用-deactivatedfor keep-alive I組件被移陰時(shí)調(diào)用attached不用了還說(shuō)啥那detached那就不說(shuō)了吧b<oreDestorbeforeDesto<y組件銷(xiāo)毀前調(diào)用destoryeddestoryed!B件銷(xiāo)毀后調(diào)用咱們從上圖可以很明顯的看出現(xiàn)在vue2.0都包括了哪些生命周期的函數(shù)了。生命周期探究對(duì)于執(zhí)行順序和什么時(shí)候執(zhí)行，看上面兩個(gè)圖基本有個(gè)了解

4、了。下面我們將結(jié)合 代碼去看看鉤子函數(shù)的執(zhí)行。ps:下面代碼可以直接復(fù)制出去執(zhí)行<!DOCTYPE html><html><head><title><title><script type="text/javascript" src=,https:/cdn jSdeIiVrnetvue2.1 3/vue js"><script<head><body><div id=,appl,><p> message <p><div>

5、<script type="textjavascript">Var app = new Vue(el: '#app'Jdata: message : HXUXiaO is boy"jbefOreCreate: function () COnSOle.group(' beforeCreate 創(chuàng)建前;IX態(tài)=COnSOIe.log(,%c%s,'"color:red" J "el : l, + this.$e 1); /undefinedCOnSOIe.log(,'%c%sl'

6、l,color:red, l,data : , + this.$dat a); /undefinedCOnSOIe1 og("%c%s", "color:red, "message: l, + this.mess age)> created: function () COnSOIe.group(,Created 創(chuàng)建完畢狀態(tài)=1 )；COnSOIe.log(l,%c%s, ,colorrred,el : , + this.$el); / undefinedCOnSOIe.IOg(,%c%s,"color:red, Hdata : , +

7、this.$dat a); /己被初始化COnSOIe1 og("%c%s", HCOIOr:red, "message: ,l + this.mess age); /己被初始化,beforeMoUnt: function () COnSOIegoup(' beforxeMoUnt 掛城態(tài)=')；COnSOIe.log(ll%c%sl'J IlCOlOr:red11 jl,el : " + (this.$el);/已被初始化COnSOIe 1og(this$el);COnSOIe.log(,'%c%sl', HCO

8、IOr:red, ,data : , + this.$data); /己被初始化ConSOIe1 og("%c%s", HCOIOr:red, "message: , + this.mess age); /己被初始化,mounted: function () COnSOIe.group(,mounted 掛我結(jié)束狀態(tài)=二1);COnSOIe.log(l,%c%sl,j ,color:red,el : " + this.$el); /已被初始化COnSOIe 1og(this$el);COnSOIe.log(,%c%sl', "color

9、:red, ,data : , + this.$data); /己被初始化COnSOIe1 og("%c%s", HCOIOr:red, "message: , + this.mess age); /己被初始化,beforeUpdate: function () COnSOIe.groupC beforeUpdate 更新)了狀態(tài)=二=,)；COnSOIe.log(,%c%s" J "color:red" j ,el : , + this.$el);COnSOIe 1og(this$el);COnSOIe.log(,%c%s, &qu

10、ot;color:red, ,data: , + this.$datConSOIe1og("%c%s", "color:red, "message: " + this.mess age)；UPdated: function () COnSOIe.group(, UPdated 更新完成狀態(tài)=二”二=)；COnSOIe.IOg(I,%c%sJ MCOlOr:red11 j,el: 11 + this.$el);COnSOIe 1og(this$el);COnSOIe.log(,%c%s, "color:red, ,data: , + t

11、his.$datConSOIe1og("%c%s", "color:red, "message: " + this.mess age);beforeDestroy: function () COnSOIe .group(, beforeDestroy 銷(xiāo)毀前狀態(tài)l);COnSOIe.log(l,%c%s"J "color:red, ,el : H + this.$el);COn SOIe 1 og(this $el);COnSOIe.log(,%c%sl'"color:red, ,data : , + th

12、is.$dat a)；ConSOIelog( "%c%s", "color:red, "message: l, + this.mess age);,destnoyed: function () COnSOIe.group(,destroyed 銷(xiāo)毀完成狀態(tài)= ,);COnSOIe. log(,%c%s" J HCOIOr:red' ,el: 11 + this.$el);COnSOIe 1og(this$el);COnSOIe.log(,%c%sl'"color:red, ,data : , + this.$dat a

13、)；COnSOIe1 og("%c%s", "color:red, "message: l, + this.mess age)<script><body><html>Create 和 InOlJnteCl 相關(guān)咱們?cè)贑hrOme瀏覽器里打開(kāi)，F(xiàn)12看COnSOIe就能發(fā)現(xiàn)beforecreated： el 和 data 并未初始化created：完成了 data數(shù)據(jù)的初始化，el沒(méi)有beforeMount：完成了 el 和 data 初始化mounted :完成掛載另外在標(biāo)紅處，我們能發(fā)現(xiàn)el還是message,這里就

14、是應(yīng)用的Virtual DOM （虛擬Dom）技術(shù)，先把坑占住了。到后面mounted掛載的時(shí)候再把值渲染進(jìn) 去。XUSiaO is boyCw jj ElementS COnSOle SOUrCeS NetWork Timelir 0 P top L J PreSerVe Iag LeforeCreate 6,fflt=el! UndefLneddata: UndeFln皀d鳳皂ss3ge: Undefined Created色健芫畢狀態(tài)”=”=el: Undefineddata: object Objectmessage; XUXLaO is boy befrefzoUnt= = = &#

15、187;el; o&ject HTMLDivElemnt <div id=,app,><j>> message <p><div>1Clata: object ObjeCtJmessage: XUXieO is boy rJ! 4±-W± tX-IlIUUrILeU耕3F4ff"el; t>ject HTMLDivE Iement <div id=,app,l><p>xu×iao is boy<p> <div>Cldtd; Objtut O,

16、tjjectIneSSage uxiao is boyUPdate相關(guān)這里我們?cè)贑hrOme COnSOle里執(zhí)行以下命令app.message= ,yes ! I do1;下面就能看到data里的值被修改后，將會(huì)觸發(fā)UPdate的操作。L vk ju<>jvWJjjja i MCV w ryes ! I do U PreSerVe Iomessage; XUXiao is boyT befOreMount 掛BiW= = = el : object HTMLDiVEIement <div id,HaPP,><p>( message ><p>

17、;<div>data : object Objectmessage; ZUXXdQ is boy mounted= »el : object HTMLDiVEIement <div id=',appn>p>xuxiao is boy<p><div>data : (OtljeCt ObjeCt)m皀ssagie： XlnCiaQ is bo：| eppmesseg巴='y亡5! Ido' be-forepdate JfjW= el ; abject HTMLDiVEIefrent fdiv idJaDt>

18、;,I c”yes ! I do<p> <div>data : object ObjeCtJ message: yes ! I doT UPdated更剌浣成伏態(tài)為:object HTMLOivEIement<p>yes!Ido<p> <div>< ',yes ! I do,destroy 相關(guān)有關(guān)于銷(xiāo)毀，暫時(shí)還不是很清楚。我們?cè)贑onSole里執(zhí)行下命令對(duì)VUe實(shí)例進(jìn) 行銷(xiāo)毀。銷(xiāo)毀完成后，我們?cè)僦匦赂淖僲essage的值，VUe不再對(duì)此動(dòng)作進(jìn)行 響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了 destro

19、y操 作，后續(xù)就不再受VUe控制了。app .*destrxoy();yes ! ! I doCK Eleme nts CQnSQI 亡SoUrCeS NetWOrk Timeline PrQfiIeS0 V top PreSerVe Iog<div>data : object ObjeCtJ message: yes ! T do IIPdated= = = Sel ! object HTMLDivElemnt <div id=wapw><p>ys ! I do<p<div>data : object ObjeCt） message: yes ! I do< "yes ! I do,w> app$蟲(chóng)5&quo

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論