vue中created與mounted區(qū)別

wuaiqiu 發(fā)布于2019-08-30 15:44 / 1049人閱讀

摘要：中與的區(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)于完整的生命周期，不久會在另一篇文章中做整體的理解，包括activated、destroyed等，不過可能會有點(diǎn)晚，大家可以留意一下

版本信息：

系統(tǒng):win10

webpack:3.6.0

npm:6.9.0

node:10.15.3

生命周期

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

瀏覽器渲染過程

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

構(gòu)建DOM樹

構(gòu)建css規(guī)則樹,根據(jù)執(zhí)行順序解析js文件。

構(gòu)建渲染樹Render Tree

渲染樹布局layout

渲染樹繪制

生命周期中的瀏覽器渲染

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

以下為測試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()
}

通過上述測試我們可以知道，

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

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

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

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

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

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

寫在最后

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

wuaiqiu

男|高級講師

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

TA的文章

你應(yīng)該使用哪個(gè)云數(shù)據(jù)庫？

閱讀 2447·2021-11-15 11:36
如何解決vue打包項(xiàng)目中的圖片,靜態(tài)css,js 不能訪問路徑問題

閱讀 1189·2019-08-30 15:56
css3 loading

閱讀 2252·2019-08-30 15:53
vue中created與mounted區(qū)別

閱讀 1050·2019-08-30 15:44
從頭開始 — CSS — 垂直居中

閱讀 663·2019-08-30 14:13
重學(xué)前端學(xué)習(xí)筆記（二十三）--狹義的文檔對象DOM

閱讀 1005·2019-08-30 10:58
前端每日實(shí)戰(zhàn)：42# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)均衡器 loader 動(dòng)畫

閱讀 485·2019-08-29 15:35
iphoneX適配-客戶端H5頁面

閱讀 1307·2019-08-29 13:58

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

資訊專欄INFORMATION COLUMN

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

vue中created與mounted區(qū)別

相關(guān)文章