# Vue學習#15 生命週期
###### tags: `Vue 直播班 - 2022 春季班` `Vue`

## 生命週期

一個 Vue 所建立的網頁都是由大小元件共同組合而成的，而每個 Vue 的實體物件就是一個元件，而每個 Vue 元件從建立到被銷毀，都有它的生命週期階段

比如我們常用的 `createApp` 就是建立 Vue 元件的實體


## Hooks Function

Vue.js 提供各種可以在生命週期中不同週期做不同處理的 callback function ， 這些 callback function 就稱為生命週期的 Hooks Function
以下列出幾種常用的

| Hooks 名稱 (Vue 2.x/3.x) | Hooks 名稱 (對應 Vue 3.0 Composition API) | 說明 |
| -------- | -------- | -------- |
| beforeCreate | setup() | Vue 實體被建立，狀態與事件都尚未初始化 |
| created | setup() | Vue 實體已建立，狀態與事件已初始化完成(prop、data、computed 等屬性已建立，vm.$el 屬性無法使用 ) |
|beforeMount | onBeforeMonut | Vue 實體尚未與模板 (DOM 節點) 綁定 |
| mounted | onMounted | Vue 實體與掛載完成 |
|beforeUpdate | onBeforeUpdate | 當狀態被變動時，畫面同步更新前 |
| updated | onUpdated | 當狀態被變動時，畫面已同步更新完成 |
| beforeUnmount | onBeforeUnmount | Vue 實體物件被銷毀前 |
| unmounted | onUnmounted | Vue 實體物件被銷毀完畢 |
| errorCaptured | onErrorCaptured | 子/孫代元件的錯誤被捕獲時觸發 |
| activated | ----- | Vue 元件被啟動時觸發，搭配 keep-alive 使用 |
| deactivated | ----- | Vue 元件被解除時觸發，搭配 keep-alive 使用 |

### Hooks Function 使用方式
使用方式很簡單，直接套用相對應的 Hooks Function 即可，這樣 Vue 實體進行至不同生命週期的階段時，就會自動觸發這個 Hooks Function
<font color='red'>記得別寫在 methods 裡面</font>

## Vue 實體建立~渲染瀏覽器過程

### 1. beforeCreate

Vue 實體剛被建立，狀態與事件都尚未初始化，此時我們還無法取得 `data` 、 `props` 、 `computed` 等屬性，直到 Vue 實體內的各種屬性、狀態的偵測都初始化完成才會進入下一個階段

### 2. created

到了這個階段代表你的資料已經儲存完成，可以存取 data 的屬性，所以接 API 資料至少要等到這個階段才能實現，但是 Vue 實體並還未與 template 模板做結合

### 3. beforeMount

取得了模板內容，並進行編譯後會進入這個階段，Vue.js 的實體將網頁上實際節點的內容替換完成後才會進入下個階段

### 4. mounted

在畫面上看到的渲染、資料等最終結果， Vue.js 才正式將網頁上的 DOM 節點、事件都綁定至 Vue 的實體

## 參考
[重新認識 Vue.js](https://book.vue.tw/CH1/1-7-lifecycle.html)