created

　　created:在模闆渲染成HTML前調用，即通常初始化某些屬性值，然後再渲染成視圖。

　　mounted:在模闆渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。

　　性能： 還沒有創建DOM，這個時候你請求後端，vue實例還在繼續工作，并且請求成功後，也沒什麼用，得等mounted執行，mounted - dom 加載完，才能渲染數據到 dom層，所以 請求和Vue中的Dome渲染是同時工作的，加大了CPU等工作量。反而會讓結果變慢。

　　什麼是生命周期 Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模闆、挂載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。

　　浏覽器渲染過程構建DOM樹構建css規則樹,根據執行順序解析js文件。構建渲染樹Render Tree渲染樹布局layout渲染樹繪制再看看每個鈎子函數都在啥時間觸發 beforeCreate

　　在實例初始化之後，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

　　created

　　實例已經創建完成之後被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，挂載階段還沒開始，$el 屬性目前不可見。

　　beforeMount

　　在挂載開始之前被調用：相關的信息 render 函數首次被調用。

　　mounted

　　el 被新創建的 vm.$el 替換，并挂載到實例上去之後調用該鈎子。

　　beforeUpdate

　　數據更新時調用，發生在虛拟 DOM 重新渲染和打補丁之前。 你可以在這個鈎子中進一步地更改狀态，這不會觸發附加的重渲染過程。

　　updated

　　由于數據更改導緻的虛拟 DOM 重新渲染和打補丁，在這之後會調用該鈎子。

　　當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀态，因為這可能會導緻更新無限循環。

　　該鈎子在服務器端渲染期間不被調用。

　　beforeDestroy

　　實例銷毀之前調用。在這一步，實例仍然完全可用。

　　destroyed

　　Vue 實例銷毀後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鈎子在服務器端渲染期間不被調用。

　　相對浏覽器來說 在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，依舊能夠在浏覽器中看到整體的頁面）。

　　總結： beforeCreate 創建之前：已經完成了 初始化事件和生命周期

　　created 創建完成：已經完成了 初始化注冊和響應

　　beforeMount 挂載之前：已經完成了模闆渲染

　　mounted :挂載之後：已完成HTML虛拟化，創建了el節點 可以操作DOM了

　　beforeDestroy ：摧毀之前：整個vue都處在實時監控空渲染和更新

　　destroyed: 已摧毀，已經摧毀了觀察者，子元素和事件監聽

　　,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!