不管是 初始化一個元件 或是 一個 Vue App，都是有生命週期的。
每個Vue的實體物件，事實上就是一個元件，而每個元件從建立到被銷毀，都是某個週期階段。
生命週期 & Hooks Function
在生命週期中，Vue.js 提供給開發者在每個週期階段可以做對應處理的 CallBack Function，這些 CallBack Function 稱為 Hooks Function。
vue3的composition已經不需要使用beforeCreate和created，但如果真的需要，可以在setup的區段內外來處理
| Hooks Function | 在Vue3 composition API 的對應名稱 |
說明 |
|---|---|---|
| beforeCreate() | setup() | Vue初始化時期 這邊的動作會在vue導入期就被執行 此階段還拿不到Vue Data 也沒有辦法使用vue裡面的Methods, Watch, Computed等。 |
| created() | setup() | Vue已被建立 可以拿到Vue Data, Function, Watch, Computed...等 但網頁內容HTML還沒準備好) |
| beforeMount() | onBeforeMount() | 已經載入原始HTML至Virtual DOM 但內容尚未透過Vue進行渲染。 |
| mounted() | onMounted() | 已經透過Vue進行渲染HTML 並且取代原本的元素內容。 這個時候可以進行一些HTML的操作 |
| beforeUpdate() | onBeforeUpdate() | 當狀態被變動時，畫面同步更新前 |
| updated() | onUpdated() | 當狀態被變動時，畫面同步更新完成 |
| beforeDestroy()-2.x | x | Vue實體被銷毀前 |
| beforeUnmount()-3.0 | onBeforeUnmount() | Vue實體被銷毀前 |
| destoryed()-2.x | x | Vue實體被銷毀完畢 |
| unmounted()-3.0 | onMounted() | Vue實體被銷毀完畢 |
| errorCaptured() | onErrorCaptured() | 子/孫元件的錯誤被捕獲時觸發 |
| activated() | x | Vue元件被啟動觸發時，須搭配keep-alive |
| deactivated() | x | Vue元件被解除觸發時，須搭配keep-alive |
- Hook Function 不能加在
methods屬性內，且由於需要透過this存取實體，所以與methods一樣不能使用箭頭函式。 - 如果要使用 AJAX，至少要到
created後才能使用 - 想要維持資料狀態，需要使用
<keep-alive>
![React-[基礎篇]- React中的狀態state](https://www.coderbridge.com/@suihsilan/d37c0a84ce2c4452ab4a6ddd3621a53e?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=Hoyi's Daily Note_React-[基礎篇]- React中的狀態state_@suihsilan_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
