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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、Vue2.0探索之路一一生命周期和鉤子函數的 一些理解在使用VUe-個多禮拜后，感覺現在還停留在初級階段，雖然知道怎么和后端 做數據交互，但是對于mounted這個掛載還不是很清楚的。放大之，對VUe的生 命周期不其了解。只知道簡單的使用，而不知道為什么，這對后面的踩坑是相當 不利的。因為我們有時候會在兒個鉤子函數里做一些事情，什么時候做，在哪個函數里做, 我們不清楚。于是我開始先去搜索，發現vue2.0的生命周期沒啥文章。大多是1.0的版本介 紹。最后還是找到一篇不錯的（會放在最后）VUe生命周期簡介new VU«()NolWhOnY-Cn.mownM<H)U CalIPd.

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

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

4、了。下面我們將結合 代碼去看看鉤子函數的執行。ps:下面代碼可以直接復制出去執行<!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 創建前;IX態=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 創建完畢狀態=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 掛城態=')；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 掛我結束狀態=二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 更新)了狀態=二=,)；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 更新完成狀態=二”二=)；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 銷毀前狀態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 銷毀完成狀態= ,);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 相關咱們在ChrOme瀏覽器里打開，F12看COnSOIe就能發現beforecreated： el 和 data 并未初始化created：完成了 data數據的初始化，el沒有beforeMount：完成了 el 和 data 初始化mounted :完成掛載另外在標紅處，我們能發現el還是message,這里就

14、是應用的Virtual DOM （虛擬Dom）技術，先把坑占住了。到后面mounted掛載的時候再把值渲染進 去。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色健芫畢狀態”=”=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相關這里我們在ChrOme COnSOle里執行以下命令app.message= ,yes ! I do1;下面就能看到data里的值被修改后，將會觸發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更剌浣成伏態為:object HTMLOivEIement<p>yes!Ido<p> <div>< ',yes ! I do,destroy 相關有關于銷毀，暫時還不是很清楚。我們在ConSole里執行下命令對VUe實例進 行銷毀。銷毀完成后，我們再重新改變message的值，VUe不再對此動作進行 響應了。但是原先生成的dom元素還存在，可以這么理解，執行了 destro

19、y操 作，后續就不再受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$蟲5&quo

溫馨提示

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

評論

0/150

提交評論