vue中created與mounted區別

wuaiqiu 發布于2019-08-30 15:44 / 1037人閱讀

摘要：中與的區別關于中的生命周期，如果不是有特別的需求，一般在項目開發過程中更多的使用和，所以在本文中主要講解與在開發中的主要使用區別。構建樹構建規則樹根據執行順序解析文件。

vue中created與mounted的區別

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

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

版本信息：

系統:win10

webpack:3.6.0

npm:6.9.0

node:10.15.3

生命周期

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

瀏覽器渲染過程

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

構建DOM樹

構建css規則樹,根據執行順序解析js文件。

構建渲染樹Render Tree

渲染樹布局layout

渲染樹繪制

生命周期中的瀏覽器渲染

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

以下為測試vue部分生命函數

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節點	是否可以獲取data	是否獲取methods
beforeCreate	否	否	否
created	否	是	是
beforeMount	否	是	是
mounted	是	是	是

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

在beforecreate階段，對瀏覽器來說，整個渲染流程尚未開始或者說準備開始，對vue來說，實例尚未被初始化，data observer和 event/watcher也還未被調用，在此階段，對data、methods或文檔節點的調用現在無法得到正確的數據。

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

在beforecreate階段，實際上與created階段類似，節點尚未掛載，但是依舊可以獲取到data與methods中的數據。

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

寫在最后

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

云服務器 GPU云服務器 MySQL中create 中SP與DP的區別 vue中 vue 中使用 webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116246.html

vue中created與mounted區別

摘要：中與的區別關于中的生命周期，如果不是有特別的需求，一般在項目開發過程中更多的使用和，所以在本文中主要講解與在開發中的主要使用區別。構建樹構建規則樹根據執行順序解析文件。 vue中created與mounted的區別關于vue.js中的生命周期，如果不是有特別的需求，一般在項目開發過程中更多的使用created和mounted，所以在本文中主要講解created與mounted在開發中...

HackerShell 2019-08-26 10:45 評論0 收藏0
關于Vue實例的生命周期created和mounted的區別

摘要：通俗說就是實例從創建到銷毀的過程，就是生命周期。在這一步，實例已完成以下的配置數據觀測，屬性和方法的運算，事件回調。關于作者程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站：http://www.linganmin.cn 最近剛寫了一個手機在線播放的H5電影站：...

Integ 2019-08-20 14:46 評論0 收藏0
關于Vue實例的生命周期created和mounted的區別

摘要：通俗說就是實例從創建到銷毀的過程，就是生命周期。在這一步，實例已完成以下的配置數據觀測，屬性和方法的運算，事件回調。關于作者程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站：http://www.linganmin.cn 最近剛寫了一個手機在線播放的H5電影站：...

baukh789 2019-08-01 16:26 評論0 收藏0
前端面試題總結——VUE（持續更新中）

摘要：前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數，可以讓開發者定制化地去處理需求。前端面試題總結——VUE（持續更新中） 1.active-class是哪個組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...

SimonMa 2019-08-22 16:08 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

klivitamJ 2019-08-30 13:48 評論0 收藏0