vue中created與mounted區(qū)別

HackerShell 發(fā)布于2019-08-26 10:45 / 1400人閱讀

摘要：中與的區(qū)別關(guān)于中的生命周期，如果不是有特別的需求，一般在項(xiàng)目開發(fā)過程中更多的使用和，所以在本文中主要講解與在開發(fā)中的主要使用區(qū)別。構(gòu)建樹構(gòu)建規(guī)則樹根據(jù)執(zhí)行順序解析文件。

vue中created與mounted的區(qū)別

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

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

版本信息：

系統(tǒng):win10

webpack:3.6.0

npm:6.9.0

node:10.15.3

生命周期

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

瀏覽器渲染過程

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

構(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"))//
    console.log("data:",this.text);//this.text
    this.sayHello();//this.sayHello()
}

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

生命周期	是否獲取dom節(jié)點(diǎn)	是否可以獲取data	是否獲取methods
beforeCreate	否	否	否
created	否	是	是
beforeMount	否	是	是
mounted	是	是	是

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

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

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

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

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

寫在最后

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

云服務(wù)器 GPU云服務(wù)器 MySQL中create 中SP與DP的區(qū)別 vue中 vue 中使用 webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106718.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

HackerShell

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

??C++布爾值??

閱讀 1225·2021-09-26 09:55
前端_CSS

閱讀 3191·2019-08-30 15:55
cssfloat布局以及其他小技巧

閱讀 965·2019-08-30 15:53
CSS文本省略顯示

閱讀 2296·2019-08-30 13:59
一些面試時(shí)關(guān)于 CSS 的問題

閱讀 2380·2019-08-29 13:08
Vue入門——Vue的核心

閱讀 1107·2019-08-29 12:19
深度解析之異步加載和預(yù)加載

閱讀 3302·2019-08-26 13:41
小程序云開發(fā)之新聞?lì)愴?xiàng)目分析

閱讀 418·2019-08-26 13:24

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

vue中created與mounted區(qū)別

相關(guān)文章