資訊專欄INFORMATION COLUMN
摘要：生命周期簡單來說就是一個組件從創建到初始化到銷毀的一個過程，在這個過程中有這些生命周期鉤子函數我們可以更方便的去操作整一個組件。
開篇先來一張圖
下圖是官方展示的生命周期圖
?
Vue實例的生命周期鉤子函數（8個）
?? ??? ?1. beforeCreate
?? ??? ??? ? 剛 new了一個組件，無法訪問到數據和真實的dom，基本上這個好像不能干啥
?? ??? ?2. created
?? ??? ??? ?data屬性完成了賦值，可以對數據進行修改但是不會觸發updated,在這里可以做初始數據的獲取
?? ??? ?3. beforeMount
?? ??? ??? ? render準備要渲染了，函數中虛擬dom已經創建完成，這時候改變數據也不會觸發update,在這里可以做初始數據的獲取
?? ??? ?4. mounted
?? ??? ?? ? ?開始render，渲染出真實dom，執行mounted鉤子函數，組件已經出現在頁面中，數據，事件，都DOM都處理好了。這里你? ? ? ? ? ? ? ? 可以改是進行真實的DOM操作
?? ??? ?5. beforeUpdate
?? ??? ? ? ? 組件，實例數據更新之前會執行的函數，虛擬DOM會重新構建虛擬DOM，與上一次的虛擬DOM對比后重新渲染。切記不可? ? ? ? ? ? ? ? ? 進行數據修改否則會出現死循環
?? ??? ?6. updated
?? ??? ? ? ? 更新完會執行的函數，切記不可進行數據修改否則會出現死循環
?? ??? ?7. beforeDestroy
?? ??? ??? ?實例被銷毀之前會執行的函數，做善后的工作，清除計時器，清除非指令綁定的事件等等
?? ??? ?8. destroyed
?? ??? ?? ? ?實例被銷毀后會執行的函數，也可以做善后工作。
class="hello"> Hello World!
console這樣一個輸出順序：
?
大概這樣一個 生命周期鉤子函數執行的順序，包括我之前是用angular開發跟vue一樣 他也有自己的生命周期鉤子函數。
生命周期簡單來說就是一個組件從創建到初始化到銷毀的一個過程，在這個過程中有這些生命周期鉤子函數我們可以更方便的去操作整一個組件。
?
此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。
如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1762.html
摘要：生命周期簡單來說就是一個組件從創建到初始化到銷毀的一個過程，在這個過程中有這些生命周期鉤子函數我們可以更方便的去操作整一個組件。 Vue實例的生命周期鉤子函數（8個） beforeCreate 剛 new了一個組件，無法訪問到數據和真實的dom，基本上這個好像不能干啥 created data屬性完成了賦值，可以對數據進行修改但是不會觸發updated,在這里可以做初始數據的...
摘要：生命周期簡單來說就是一個組件從創建到初始化到銷毀的一個過程，在這個過程中有這些生命周期鉤子函數我們可以更方便的去操作整一個組件。 Vue實例的生命周期鉤子函數（8個） beforeCreate 剛 new了一個組件，無法訪問到數據和真實的dom，基本上這個好像不能干啥 created data屬性完成了賦值，可以對數據進行修改但是不會觸發updated,在這里可以做初始數據的...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 1411·2021-11-25 09:43
閱讀 2268·2021-09-27 13:36
閱讀 1121·2021-09-04 16:40
閱讀 1963·2019-08-30 11:12
閱讀 3318·2019-08-29 14:14
閱讀 572·2019-08-28 17:56
閱讀 1330·2019-08-26 13:50
閱讀 1252·2019-08-26 13:29
