vue中created和mounted的區(qū)別淺析

前言

關(guān)于vue.js中的生命周期，如果不是有特別的需求，一般在項(xiàng)目開發(fā)過(guò)程中更多的使用created和mounted，
所以在本文中主要講解created與mounted在開發(fā)中的主要使用區(qū)別。

關(guān)于完整的生命周期，不久會(huì)在另一篇文章中做整體的理解，包括activated、destroyed等，不過(guò)可能會(huì)有點(diǎn)晚，大家可以留意一下

版本信息：

• 系統(tǒng):win10
• Vue:2.5.2
• webpack:3.6.0
• npm:6.9.0
• node:10.15.3

生命周期

完整的生命周期圖示為了避免占用板塊，這里就不貼出來(lái)了，大家可以自行前往vue生命周期查看。

瀏覽器渲染過(guò)程

具體的瀏覽器渲染過(guò)程我會(huì)過(guò)幾天另外寫一遍文章，大家可以去我的文章看看。

• 構(gòu)建DOM樹
• 構(gòu)建css規(guī)則樹,根據(jù)執(zhí)行順序解析js文件。
• 構(gòu)建渲染樹Render Tree
• 渲染樹布局layout
• 渲染樹繪制

生命周期中的瀏覽器渲染

這里是官方文檔對(duì)生命周期api的解釋，大家可以看看

以下為測(cè)試vue部分生命函數(shù)

beforeCreate(){
 console.log('beforecreate:',document.getElementById('first'))//null
 console.log('data:',this.text);//undefined
 this.sayHello();//error:not a function
},
created(){
 console.log('create:',document.getElementById('first'))//null
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
},
beforeMount(){
 console.log('beforeMount:',document.getElementById('first'))//null
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
},
mounted(){
 console.log('mounted:',document.getElementById('first'))//<p></p>
 console.log('data:',this.text);//this.text
 this.sayHello();//this.sayHello()
}

通過(guò)上述測(cè)試我們可以知道，

以我的個(gè)人理解，vue生命周期實(shí)際上和瀏覽器渲染過(guò)程是掛鉤的，

在beforecreate階段，對(duì)瀏覽器來(lái)說(shuō)，整個(gè)渲染流程尚未開始或者說(shuō)準(zhǔn)備開始，對(duì)vue來(lái)說(shuō)，實(shí)例尚未被初始化，data observer和 event/watcher也還未被調(diào)用，在此階段，對(duì)data、methods或文檔節(jié)點(diǎn)的調(diào)用現(xiàn)在無(wú)法得到正確的數(shù)據(jù)。

在created階段，對(duì)瀏覽器來(lái)說(shuō)，渲染整個(gè)HTML文檔時(shí),dom節(jié)點(diǎn)、css規(guī)則樹與js文件被解析后，但是沒有進(jìn)入被瀏覽器render過(guò)程，上述資源是尚未掛載在頁(yè)面上，也就是在vue生命周期中對(duì)應(yīng)的created
階段，實(shí)例已經(jīng)被初始化，但是還沒有掛載至$el上，所以我們無(wú)法獲取到對(duì)應(yīng)的節(jié)點(diǎn)，但是此時(shí)我們是可以獲取到vue中data與methods中的數(shù)據(jù)的

在beforecreate階段，實(shí)際上與created階段類似，節(jié)點(diǎn)尚未掛載，但是依舊可以獲取到data與methods中的數(shù)據(jù)。

在mounted階段，對(duì)瀏覽器來(lái)說(shuō)，已經(jīng)完成了dom與css規(guī)則樹的render，并完成對(duì)render tree進(jìn)行了布局，而瀏覽器收到這一指令，調(diào)用渲染器的paint（）在屏幕上顯示，而對(duì)于vue來(lái)說(shuō)，在mounted階段，vue的template成功掛載在$el中，此時(shí)一個(gè)完整的頁(yè)面已經(jīng)能夠顯示在瀏覽器中，所以在這個(gè)階段，即可以調(diào)用節(jié)點(diǎn)了（關(guān)于這一點(diǎn)，在筆者測(cè)試中，在mounted方法中打斷點(diǎn)然后run，依舊能夠在瀏覽器中看到整體的頁(yè)面）。

寫在最后

筆者目前也只是一個(gè)職場(chǎng)小白，粗略探討一下自己的看法，若有疑問(wèn)，或者文章錯(cuò)誤，都可以在評(píng)論中指出，我們一起討論

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)億速云的支持。