Vue 實(shí)例有一個(gè)完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列
過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。
生命周期小結(jié)
生命周期鉤子的一些使用方法：
我的總結(jié)：
1、mounted只會(huì)在加載頁面的時(shí)候執(zhí)行一次
2、created:會(huì)多次執(zhí)行
3、updated:如果需要對(duì)渲染完成的dom樹進(jìn)行操作，可以在update里進(jìn)行
beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)
created : 初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用
mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)
updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù) 。如果需要對(duì)渲染完成的dom樹進(jìn)行操作，可以在update里進(jìn)行
beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框
nextTick : 更新數(shù)據(jù)后立即操作dom
代碼實(shí)例生命周期、鉤子函數(shù)： 轉(zhuǎn)載自：http://www.itdecent.cn/p/ea452d3a1671
https://segmentfault.com/a/1190000008570622
https://www.cnblogs.com/fly_dragon/p/6220273.html
vue2.x————生命周期與鉤子函數(shù)
兲坈 關(guān)注
2017.05.26 20:28* 字?jǐn)?shù) 1209 閱讀 353評(píng)論 0喜歡 8
vue2.x————生命周期與鉤子函數(shù)
前言
現(xiàn)在已經(jīng)越來越多的人開始使用vue了，vuex+vue-router+axios進(jìn)行開發(fā)成為了趨勢(shì)，很多人能夠快速的進(jìn)行開發(fā)以及和后端做數(shù)據(jù)的交互，但是對(duì)于所謂的生命周期就不知道是什么東西了。于是經(jīng)過查看API文檔以及網(wǎng)上眾多的文章查詢，還有親身試驗(yàn)，總結(jié)了一下以下經(jīng)驗(yàn)
vue1.x 與 vue2.0的生命周期是有區(qū)別的，但基本上我們都是使用vue2.0，如果之前使用了1.x版本開發(fā)的小伙伴可以去官網(wǎng)查看一下如何遷移vue官方文檔（從vue1.x遷移）
vue1.x鉤子函數(shù)可以總共分為9個(gè)階段：
- init ----- 在實(shí)例開始初始化時(shí)同時(shí)調(diào)用。此時(shí)數(shù)據(jù)觀測(cè)。事件和watcher都尚未初始化。
- created ----- 在實(shí)例化創(chuàng)建之后會(huì)不調(diào)用，此時(shí)實(shí)例已經(jīng)結(jié)束解析選項(xiàng)，已建立:數(shù)據(jù)綁定、計(jì)算屬性、方法、Watcher/事件回調(diào)，但是還沒有開始DOM編譯，$el還不存在
- beforeCompile ----- 在編譯開始前調(diào)用
- compiled ----- 在編譯結(jié)束后調(diào)用。此時(shí)所有指令已經(jīng)生效，因此數(shù)據(jù)的變化將觸發(fā)DOM更新，但$el的數(shù)據(jù)尚未渲染到頁面上
- ready ----- 在編譯結(jié)束和$el第一次插入文檔后調(diào)用
- attached ----- vm.$el插入Dom時(shí)調(diào)用
- detached ----- vm.
el不會(huì)觸發(fā)
- destroyed ----- 在實(shí)例被銷毀之后調(diào)用，此時(shí)所有的綁定和實(shí)例的指令已經(jīng)解綁，所有子實(shí)例已經(jīng)銷毀
9.destroyed ----- 在實(shí)例開始銷毀之后調(diào)用，此時(shí)所有的綁定和實(shí)例的指令已經(jīng)解綁，所有實(shí)例已經(jīng)銷毀
vue2.0鉤子函數(shù)可以總共分為8個(gè)階段
- beforeCreate（創(chuàng)建前）----- 2.0版本中新增beforeCreate,在實(shí)例初始化之后，數(shù)據(jù)觀察(data observer)和event/watcher事件配置之前被調(diào)用。
- created（創(chuàng)建后）
- beforeMount(載入前) ----- 2.0版本中新增beforeMount，是在Watcher之前、模板編譯成render方法之后調(diào)用，相關(guān)render首次被調(diào)用。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。
- mounted（載入后）
- beforeUpdate（更新前） ----- 2.0版本中新增beforeUpdate,是在DOM樹生成之前、虛擬DOM樹生成之后調(diào)用，調(diào)用條件是這個(gè)vm實(shí)例已經(jīng)mounted過。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。
- updated（更新后）----- 2.0版本中新增updated，在DOM樹生成之后調(diào)用，調(diào)用條件是這個(gè)vm實(shí)例已經(jīng)mounted過。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。
- beforeDestroy（銷毀前）
- destroyed（銷毀后）
現(xiàn)在的vue最新的版本是2.3.3 基本上與 vue2.0差距不大，在生命周期與鉤子函數(shù)上基本一樣
下面將結(jié)合代碼去看看鉤子函數(shù)的執(zhí)行順序
HTML代碼部分
<div id="app">
<input type="text" v-model='message' name="" id="" value="" />
<div>{{message}}</div>
</div>
js代碼部分
beforecreate:
var app = new Vue({
el: '#app',
data: {
message: "my name is shalien"
},
beforeCreate:function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)=========》');
console.log( "el : " + this.$el); //undefined
console.log("data : " + this.$data); //undefined
console.log("message: " + this.message)
},
created:function () {
console.group('created 創(chuàng)建完畢狀態(tài)===========》');
console.log("el : " + this.$el); //undefined
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeMount:function () {
console.group('beforeMount 掛載前狀態(tài)=========》');
console.log("el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
mounted:function () {
console.group('mounted 掛載結(jié)束狀態(tài)==========》');
console.log("el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("data : " + this.$data); //已被初始化
console.log("message: " + this.message); //已被初始化
},
beforeUpdate:function () {
console.group('beforeUpdate 更新前狀態(tài)=========》'); console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
updated:function () {
console.group('updated 更新完成狀態(tài)===========》'); console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy:function () {
console.group('beforeDestroy 銷毀前狀態(tài)=========》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message);
},
destroyed:function () {
console.group('destroyed 銷毀完成狀態(tài)==========》');
console.log("el : " + this.$el);
console.log(this.$el);
console.log("data : " + this.$data);
console.log("message: " + this.message)
}
}
在瀏覽器中進(jìn)行運(yùn)行，就會(huì)出現(xiàn)我們看到各個(gè)時(shí)間段的觸發(fā)，我這里使用的是Chrome瀏覽器，在控制臺(tái)中進(jìn)行輸出的樣子顯示出嵌套的結(jié)構(gòu)，看起來非常的清晰
beforecreated:el和data尚未初始化
created:完成了 data 數(shù)據(jù)的初始化，el沒有
beforeMount：完成了 el 和 data 初始化 在掛載前狀態(tài)的時(shí)候獲取的el值里面還是只有表達(dá)式{{message}}這個(gè)是使用了虛擬dom技術(shù)占據(jù)位置，當(dāng)mounted掛載的時(shí)候再把值渲染進(jìn)去
mounted ：完成掛載
當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，如更改data里的message 的值
可以看到，當(dāng)message里的值被修改的時(shí)候，觸發(fā)updata的函數(shù)
destroy銷毀
我們可以通過app.$destroy對(duì)vue的實(shí)例進(jìn)行銷毀，銷毀完成之后該實(shí)例將不會(huì)對(duì)所掛載的函數(shù)進(jìn)行響應(yīng)，但是原本生成的dom元素及渲染出來的值還是存在的，執(zhí)行了detrory操作之后，vue將不能控制
生命周期大概就是這些，那么應(yīng)該在什么時(shí)候使用什么函數(shù)呢，這個(gè)還是那句，看情況而定例如在
beforecreate : 可以在這加個(gè)loading事件
created ：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行
mounted ： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeDestory： 你確認(rèn)刪除XX嗎？
destoryed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容
等........當(dāng)然更多操作還是得讓各位按照各自需求去做了
文章如有錯(cuò)誤還請(qǐng)大牛指正??！
