Vue2.0生命周期的理解
網(wǎng)上已經(jīng)有很多關(guān)于vue生命周期的文章,我的這篇文章的由來,其實是我對官網(wǎng)上描述的一句話的思考與理解:“el被新創(chuàng)建的vm.$el替換”,所以文章更多的內(nèi)容可能是在對vue生命周期中“created -> beforeMount -> mounted” 過程的理解。
beforeCreate --> created 之間
在這個階段初始化事件,進(jìn)行數(shù)據(jù)觀測。
created
vue實例創(chuàng)建完后被調(diào)用,此時已經(jīng)完成了數(shù)據(jù)觀測(data observer),屬性和方法的運算,watch/event 事件回調(diào)的配置。
可調(diào)用methods中的方法,訪問和修改data中的數(shù)據(jù),并觸發(fā)響應(yīng)式變化使DOM渲染更新,觸發(fā)watch中相應(yīng)的方法,computed相關(guān)屬性進(jìn)行重新計算。
一般在created時,進(jìn)行ajax請求初始化實例數(shù)據(jù)。
此時,vm.$el不可見。
created --> beforeMount 之間
在這個過程中,
a、首先判斷實例中是否有el選項,有的話繼續(xù)向下編譯,沒有的話會停止編譯,直到vm.$mount(el)被調(diào)用時才繼續(xù)(el是掛載的DOM節(jié)點);
b、接下來判斷實例中是否有template,有的話將其作為模板編譯成rander函數(shù);
c、沒有template的話就,就將掛載DOM元素的html(即el所對應(yīng)的DOM元素及其內(nèi)部的元素)提取出來作為模板編譯;
*注:el所對應(yīng)的DOM元素不能為body/html元素,因為在后面vue實例掛載時,el所對應(yīng)的DOM元素及其內(nèi)部的元素會被模板渲染出來的新的DOM所替換。
d、如果實例對象中有rander函數(shù),就直接通過它進(jìn)行渲染操作。
優(yōu)先級:rander函數(shù) > template > 外部html
此時,rander函數(shù)已經(jīng)準(zhǔn)備好并首次被調(diào)用。
在這個過程中,$el被初始化為實例中el選項所對應(yīng)的DOM元素,所以在beforeMount時,用vm.$el獲取到的是掛載DOM元素的html。
beforeMount
beforeMount被調(diào)用時,此時$el可見。
beforeMount --> mounted 之間
在這個過程中,el被新創(chuàng)建的vm.$el所替換,并完成實例的掛載。即實例中的el選項被模板渲染創(chuàng)建出來的DOM元素所替換,頁面中的掛載點被渲染出的vue實例代碼段所替換。
Mounted
此時實例已掛載到DOM上,可以通過DOM API獲取實例中DOM節(jié)點。在控制臺打印vm.$el,發(fā)現(xiàn)之前的掛載點及內(nèi)容已被替換成新的DOM。
下面通過栗子看一下這兩個過程。
<!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選項可以在控制臺清楚的看到:掛載完成后,el被新創(chuàng)建的vm.$el替換。
掛載前是以初始的el和虛擬DOM的形式存在的,此時以template中的內(nèi)容為模板,模板內(nèi)容不可見,打印p標(biāo)簽為null;
掛載后,模板渲染的新DOM替換原來的el,原el所對應(yīng)的DOM不存在,打印a標(biāo)簽為null。
beforeUpdate 和 updated
當(dāng)data對象中數(shù)據(jù)更新時,會觸發(fā) beforeUpdate鉤子,此時view層還沒有更新。 beforeUpdate有下面幾個需要注意的地方:
a、更新的數(shù)據(jù)必須在模板中直接或間接的使用,才會觸發(fā)beforeUpdate;
b、在掛載之前,data中數(shù)據(jù)更新不會觸發(fā) beforeUpdate!即在created、beforeMount時改變數(shù)據(jù)不會觸發(fā)更新流程;
c、如果在beforeUpdate中,再次修改了該數(shù)據(jù)的值,會再次觸發(fā)beforeUpdate鉤子,進(jìn)行兩次更新流程。
updated時,view層已更新完畢。
(在上面的代碼中增加兩個鉤子)
mounted: function () { this.message = 'first'; // this.show = false; // 由于模板中沒有用到show,所以show的改變不會觸發(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); }
這里需要注意一點:view層我們需要通過innerHTML獲取對應(yīng)元素節(jié)點中的內(nèi)容,而不能直接獲取元素節(jié)點。直接獲取元素節(jié)點,在控制臺打印出來的view層中的數(shù)據(jù)都是更新之后的狀態(tài),不能打印出實時的正確的值,這應(yīng)該和Chrome控制臺的輸出有關(guān)。
針對第三條,我們看一下下面的代碼演示:
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'; // 此時在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)行了兩次更新流程,但是對打印的結(jié)果有些疑問:第一次將message的值改為first,并且以first來渲染更新DOM,那么第一次調(diào)用updated時,message和DOM中的值都應(yīng)該是first,而此時打印出來的時second。我理解的是,在第一次執(zhí)行updated時,DOM就已經(jīng)完成了第二次渲染更新,具體的過程還需要通過之后對源碼的學(xué)習(xí)去理解。這里各位有不同的理解或者更詳細(xì)的解釋,可以在評論區(qū)留言,共同學(xué)習(xí)。
在這里,我們可以在beforeUpdate中加定時器去修改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'; // 此時在beforeUpdate中再次修改了message的值 },
這里可以清楚看到兩次數(shù)據(jù)改變時,數(shù)據(jù)和view層的更新狀態(tài)。
beforeDestroy 和 destroyed
beforeDestroy:實例在銷毀之前調(diào)用,此時實例仍然可用。
beforeDestroy -> destroyed: Vue 實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀。
destroyed:vue實例銷毀后調(diào)用。
結(jié)尾:關(guān)于vue生命周期就總結(jié)完畢,有錯誤的地方煩請指出,會及時修改!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-03-03vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實現(xiàn)點擊跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04el-dialog關(guān)閉再打開后窗口內(nèi)容不刷新問題及解決
這篇文章主要介紹了el-dialog關(guān)閉再打開后窗口內(nèi)容不刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02