摘要:中與的區別關于中的生命周期,如果不是有特別的需求,一般在項目開發過程中更多的使用和,所以在本文中主要講解與在開發中的主要使用區別。構建樹構建規則樹根據執行順序解析文件。
vue中created與mounted的區別
關于vue.js中的生命周期,如果不是有特別的需求,一般在項目開發過程中更多的使用created和mounted,
所以在本文中主要講解created與mounted在開發中的主要使用區別。
關于完整的生命周期,不久會在另一篇文章中做整體的理解,包括activated、destroyed等,不過可能會有點晚,大家可以留意一下
版本信息:
系統:win10
Vue:2.5.2
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,依舊能夠在瀏覽器中看到整體的頁面)。
寫在最后筆者目前也只是一個職場小白,粗略探討一下自己的看法,若有疑問,或者文章錯誤,都可以在評論中指出,我們一起討論
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106718.html
摘要:中與的區別關于中的生命周期,如果不是有特別的需求,一般在項目開發過程中更多的使用和,所以在本文中主要講解與在開發中的主要使用區別。構建樹構建規則樹根據執行順序解析文件。 vue中created與mounted的區別 關于vue.js中的生命周期,如果不是有特別的需求,一般在項目開發過程中更多的使用created和mounted,所以在本文中主要講解created與mounted在開發中...
摘要:通俗說就是實例從創建到銷毀的過程,就是生命周期。在這一步,實例已完成以下的配置數據觀測,屬性和方法的運算,事件回調。 關于作者 程序開發人員,不拘泥于語言與技術,目前主要從事PHP和前端開發,使用Laravel和VueJs,App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站:http://www.linganmin.cn 最近剛寫了一個手機在線播放的H5電影站:...
摘要:通俗說就是實例從創建到銷毀的過程,就是生命周期。在這一步,實例已完成以下的配置數據觀測,屬性和方法的運算,事件回調。 關于作者 程序開發人員,不拘泥于語言與技術,目前主要從事PHP和前端開發,使用Laravel和VueJs,App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站:http://www.linganmin.cn 最近剛寫了一個手機在線播放的H5電影站:...
摘要:前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數,可以讓開發者定制化地去處理需求。 前端面試題總結——VUE(持續更新中) 1.active-class是哪個組件的屬性? vue-router模塊的router-link組件。 2.嵌套路由怎么定義? 在 VueRouter 的參數中使用 children 配置,這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...
摘要:供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下,我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實例從創建到銷毀的過程,稱為生命周期,共有八個階段。 這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...
閱讀 1214·2021-09-26 09:55
閱讀 3159·2019-08-30 15:55
閱讀 948·2019-08-30 15:53
閱讀 2286·2019-08-30 13:59
閱讀 2367·2019-08-29 13:08
閱讀 1098·2019-08-29 12:19
閱讀 3290·2019-08-26 13:41
閱讀 411·2019-08-26 13:24