官網解釋
一、Vue的生命周期
Vue 實體有?個完整的?命周期，也就是從開始創建、初始化資料、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列程序，稱這是Vue的?命周期，
Vue2生命周期：
1.beforeCreate（創建前）
- 資料觀測和初始化事件還未開始，此時 data 的回應式追蹤、event/watcher 都還沒有被設定，也就是說不能訪問到data、computed、watch、methods上的方法和資料，
2.created（創建后）
- 實體創建完成，實體上配置的 options 包括 data、computed、watch、methods 等都配置完成，可以訪問data資料以及methods方法，但是此時渲染得節點還未掛載到 DOM，所以不能訪問到 $el 屬性（vm實體身上），
3.beforeMount（掛載前）
- 在掛載開始之前被呼叫，相關的render函式首次被呼叫，實體已完成以下的配置：編譯模板，把data里面的資料和模板生成html，此時還沒有掛載html到頁面上，虛擬DOM生成，此時頁面渲染的是未經vue編譯的DOM結構，
4.mounted（掛載后）
- 在el被新創建的 vm.$el 替換，并掛載到實體上去之后呼叫，實體已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM物件，完成模板中的html渲染到html 頁面中，
5.beforeUpdate（更新前）
- 回應式資料更新時呼叫，此時雖然回應式資料更新了，但是對應的真實 DOM 還沒有被渲染，
6.updated（更新后）
- 在由于資料更改導致的虛擬DOM重新渲染和打補丁之后呼叫，此時 DOM 已經根據回應式資料的變化更新了，呼叫時，組件 DOM已經更新，所以可以執行依賴于DOM的操作，然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限回圈，該鉤子在服務器端渲染期間不被呼叫，
7.beforeDestroy（銷毀前）
- 實體銷毀之前呼叫，這一步，實體仍然完全可用，this 仍能獲取到實體，
8.destroyed（銷毀后）
- 實體銷毀后呼叫，呼叫后，Vue 實體指示的所有東西都會解系結，所有的事件監聽器會被移除，所有的子實體也會被銷毀，該鉤子在服務端渲染期間不被呼叫，
Vue2與Vue3生命周期區別：
二、Vue 子組件和父組件執行順序
1.加載渲染程序
- 父組件 beforeCreate
- 父組件 created
- 父組件 beforeMount
- 子組件 beforeCreate
- 子組件 created
- 子組件 beforeMount
- 子組件 mounted
- 父組件 mounted
2.更新程序
- 父組件 beforeUpdate
- 子組件 beforeUpdate
- 子組件 updated
- 父組件 updated
3.銷毀程序
- 父組件 beforeDestroy
- 子組件 beforeDestroy
- 子組件 destroyed
- 父組件 destoryed
三、created和mounted的區別
- created
- 在模板渲染成html前呼叫，即通常初始化某些屬性值，然后再渲染成視圖，此時可以訪問到data資料及methods中的方法等，
- mounted
- 在模板渲染成html后呼叫，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作（盡量避免），至此初始化程序結束，一般在此階段會發送ajax請求，開啟定時器、系結自定義事件，訂閱訊息等初始化操作，
四、一般在哪個生命周期請求異步資料
- 我們可以在鉤子函式 created、beforeMount、mounted 中進行呼叫，因為在這三個鉤子函式中，data 已經創建，可以將服務端端回傳的資料進行賦值，推薦在 **created **鉤子函式中呼叫異步請求，因為在 created 鉤子函式中呼叫異步請求有以下優點
- 能更快獲取到服務端資料，減少頁面加載時間，用戶體驗更好
- SSR不支持 beforeMount 、mounted 鉤子函式，放在 created 中有助于一致性
五、keep-alive 中的生命周期
- keep-alive是 Vue 提供的一個內置組件，用來對組件進行快取——在組件切換程序中將狀態保留在記憶體中，防止重復渲染DOM，
- 如果為一個組件包裹了 keep-alive，那么它會多出兩個生命周期：deactivated、activated，同時，beforeDestroy 和 destroyed 就不會再被觸發了，因為組件不會被真正銷毀，
- 當組件被換掉時，會被快取到記憶體中、觸發 deactivated 生命周期；當組件被切回來時，再去快取里找這個組件、觸發 activated鉤子函式，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541014.html
標籤：其他