生命周期鉤子

何為生命周期：

• 通俗地講，生命周期即Vue實例或組件從創建到被消滅的一系列過程，中間的各個節點被稱為鉤子

生命周期圖示：

瀏覽器渲染過程

要深刻理解生命周期的各個節點，就必須了解瀏覽器的渲染過程

• 構建DOM樹
• 構建css規則樹,根據執行順序解析js文件。
• 構建渲染樹Render Tree
• 渲染樹布局layout
• 渲染樹繪制

英語課堂

既然我們分析的是created和mounted鉤子，單詞對我們的理解也有所幫助

• created：已創建
• mounted：已掛載

生命周期中的瀏覽器渲染

生命周期是否獲取dom節點是否獲取data是否獲取methods

beforeCreate	否	否	否
created	否	是	是
beforeMount	否	是	是
mounted	是	是	是

從文章開頭的生命周期圖示可以看出

• created在模板渲染成html前調用
• mounted在模板渲染成html后調用

beforeCreate階段

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

created階段

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

beforeMount階段

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

mounted階段

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

使用場景

通過瀏覽器的渲染過程，可以總結出created和mounted的使用場景

• created：通常用于初始化某些屬性值，例如data中的數據，然后再渲染成視圖。
• mounted：通常在初始化頁面完成后，對html的dom節點進行需要的操作。

因此，在created中，是無法進行DOM操作的，而mounted可以獲取渲染出來的所有屬性值。

參考文檔

[生命周期鉤子 | Vue.js (vuejs.org)]

Vue生命周期中mounted和created的區別

[vue中created與mounted區別]

總結

以上是生活随笔為你收集整理的详解created和mounted区别与使用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。