溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“Vue2.0生命周期的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue2.0生命周期的示例分析”這篇文章吧。
網(wǎng)上已經(jīng)有很多關(guān)于vue生命周期的文章，我的這篇文章的由來(lái)，其實(shí)是我對(duì)官網(wǎng)上描述的一句話(huà)的思考與理解：“el被新創(chuàng)建的vm.$el替換”，所以文章更多的內(nèi)容可能是在對(duì)vue生命周期中“created -> beforeMount -> mounted” 過(guò)程的理解。
beforeCreate --> created 之間
在這個(gè)階段初始化事件，進(jìn)行數(shù)據(jù)觀測(cè)。
created
vue實(shí)例創(chuàng)建完后被調(diào)用，此時(shí)已經(jīng)完成了數(shù)據(jù)觀測(cè)(data observer)，屬性和方法的運(yùn)算，watch/event 事件回調(diào)的配置。
可調(diào)用methods中的方法，訪問(wèn)和修改data中的數(shù)據(jù)，并觸發(fā)響應(yīng)式變化使DOM渲染更新，觸發(fā)watch中相應(yīng)的方法，computed相關(guān)屬性進(jìn)行重新計(jì)算。
一般在created時(shí)，進(jìn)行ajax請(qǐng)求初始化實(shí)例數(shù)據(jù)。
此時(shí)，vm.$el不可見(jiàn)。
created --> beforeMount 之間
在這個(gè)過(guò)程中，
a、首先判斷實(shí)例中是否有el選項(xiàng)，有的話(huà)繼續(xù)向下編譯，沒(méi)有的話(huà)會(huì)停止編譯，直到vm.$mount(el)被調(diào)用時(shí)才繼續(xù)（el是掛載的DOM節(jié)點(diǎn)）；
b、接下來(lái)判斷實(shí)例中是否有template，有的話(huà)將其作為模板編譯成rander函數(shù)；
c、沒(méi)有template的話(huà)就，就將掛載DOM元素的html（即el所對(duì)應(yīng)的DOM元素及其內(nèi)部的元素）提取出來(lái)作為模板編譯；
*注：el所對(duì)應(yīng)的DOM元素不能為body/html元素，因?yàn)樵诤竺鎣ue實(shí)例掛載時(shí)，el所對(duì)應(yīng)的DOM元素及其內(nèi)部的元素會(huì)被模板渲染出來(lái)的新的DOM所替換。
d、如果實(shí)例對(duì)象中有rander函數(shù)，就直接通過(guò)它進(jìn)行渲染操作。
優(yōu)先級(jí)：rander函數(shù) > template > 外部html
此時(shí)，rander函數(shù)已經(jīng)準(zhǔn)備好并首次被調(diào)用。
在這個(gè)過(guò)程中，$el被初始化為實(shí)例中el選項(xiàng)所對(duì)應(yīng)的DOM元素，所以在beforeMount時(shí)，用vm.$el獲取到的是掛載DOM元素的html。
beforeMount
beforeMount被調(diào)用時(shí)，此時(shí)$el可見(jiàn)。
beforeMount --> mounted 之間
在這個(gè)過(guò)程中，el被新創(chuàng)建的vm.$el所替換，并完成實(shí)例的掛載。即實(shí)例中的el選項(xiàng)被模板渲染創(chuàng)建出來(lái)的DOM元素所替換，頁(yè)面中的掛載點(diǎn)被渲染出的vue實(shí)例代碼段所替換。
Mounted
此時(shí)實(shí)例已掛載到DOM上，可以通過(guò)DOM API獲取實(shí)例中DOM節(jié)點(diǎn)。在控制臺(tái)打印vm.$el，發(fā)現(xiàn)之前的掛載點(diǎn)及內(nèi)容已被替換成新的DOM。
下面通過(guò)栗子看一下這兩個(gè)過(guò)程。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script> </head> <body> <div id="app"> <a id='ela' href="">{{message}}</a> </div> </body> <script> var app = new Vue({ el: '#app', data: function () { return { message: 'hello' }; }, template: '<p id="elp">{{message}}</p>', beforeMount: function () { console.group('beforeMount 掛載前狀態(tài)===============》'); let state = { 'el': this.$el, 'data': this.$data, 'message': this.message } let a = document.getElementById('ela'); let p = document.getElementById('elp'); console.log(this.$el); console.log(state); console.log(a); // <a id='ela' href="">{{message}}</a> console.log(p); // null }, mounted: function () { console.group('mounted 掛載結(jié)束狀態(tài)===============》'); let state = { 'el': this.$el, 'data': this.$data, 'message': this.message } let a = document.getElementById('ela'); let p = document.getElementById('elp'); console.log(this.$el); console.log(state); console.log(a); // null console.log(p); // <p id="elp">father</p> } </script> </html>
用template/rander選項(xiàng)可以在控制臺(tái)清楚的看到：掛載完成后，el被新創(chuàng)建的vm.$el替換。
掛載前是以初始的el和虛擬DOM的形式存在的，此時(shí)以template中的內(nèi)容為模板，模板內(nèi)容不可見(jiàn)，打印p標(biāo)簽為null；
掛載后，模板渲染的新DOM替換原來(lái)的el，原el所對(duì)應(yīng)的DOM不存在，打印a標(biāo)簽為null。
beforeUpdate 和 updated
當(dāng)data對(duì)象中數(shù)據(jù)更新時(shí)，會(huì)觸發(fā) beforeUpdate鉤子，此時(shí)view層還沒(méi)有更新。 beforeUpdate有下面幾個(gè)需要注意的地方：
a、更新的數(shù)據(jù)必須在模板中直接或間接的使用，才會(huì)觸發(fā)beforeUpdate；
b、在掛載之前，data中數(shù)據(jù)更新不會(huì)觸發(fā) beforeUpdate！即在created、beforeMount時(shí)改變數(shù)據(jù)不會(huì)觸發(fā)更新流程；
c、如果在beforeUpdate中，再次修改了該數(shù)據(jù)的值，會(huì)再次觸發(fā)beforeUpdate鉤子，進(jìn)行兩次更新流程。
updated時(shí)，view層已更新完畢。
（在上面的代碼中增加兩個(gè)鉤子）
mounted: function () {
this.message = 'first';
// this.show = false; // 由于模板中沒(méi)有用到show，所以show的改變不會(huì)觸發(fā)beforeUpdate
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
}
這里需要注意一點(diǎn)：view層我們需要通過(guò)innerHTML獲取對(duì)應(yīng)元素節(jié)點(diǎn)中的內(nèi)容，而不能直接獲取元素節(jié)點(diǎn)。直接獲取元素節(jié)點(diǎn)，在控制臺(tái)打印出來(lái)的view層中的數(shù)據(jù)都是更新之后的狀態(tài)，不能打印出實(shí)時(shí)的正確的值，這應(yīng)該和Chrome控制臺(tái)的輸出有關(guān)。
針對(duì)第三條，我們看一下下面的代碼演示：
mounted: function () {
this.message = 'first';
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
this.message = 'second'; // 此時(shí)在beforeUpdate中再次修改了message的值
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
}
這里我們可以清楚的看到進(jìn)行了兩次更新流程，但是對(duì)打印的結(jié)果有些疑問(wèn)：第一次將message的值改為first，并且以first來(lái)渲染更新DOM，那么第一次調(diào)用updated時(shí)，message和DOM中的值都應(yīng)該是first，而此時(shí)打印出來(lái)的時(shí)second。我理解的是，在第一次執(zhí)行updated時(shí)，DOM就已經(jīng)完成了第二次渲染更新，具體的過(guò)程還需要通過(guò)之后對(duì)源碼的學(xué)習(xí)去理解。這里各位有不同的理解或者更詳細(xì)的解釋?zhuān)梢栽谠u(píng)論區(qū)留言，共同學(xué)習(xí)。
在這里，我們可以在beforeUpdate中加定時(shí)器去修改message的值，就可以等待第一次數(shù)據(jù)改變，DOM更新渲染完成后，進(jìn)行第二次數(shù)據(jù)改變。
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
var that = this;
setTimeout(function(){
that.message = 'second';
});
// this.message = 'second'; // 此時(shí)在beforeUpdate中再次修改了message的值
},
這里可以清楚看到兩次數(shù)據(jù)改變時(shí)，數(shù)據(jù)和view層的更新?tīng)顟B(tài)。
beforeDestroy 和 destroyed
beforeDestroy：實(shí)例在銷(xiāo)毀之前調(diào)用，此時(shí)實(shí)例仍然可用。
beforeDestroy -> destroyed： Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。
destroyed：vue實(shí)例銷(xiāo)毀后調(diào)用。
以上是“Vue2.0生命周期的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼