>[success] # 生命周期 1. 與 2.x 版本生命周期相對應的組合式 API * beforeCreate -> 使用 setup() * created -> 使用 setup() * beforeMount -> onBeforeMount * mounted -> onMounted * beforeUpdate -> onBeforeUpdate * updated -> onUpdated * beforeDestroy -> onBeforeUnmount * destroyed -> onUnmounted * errorCaptured -> onErrorCaptured 2. 新增的鉤子函數組合式 API 還提供了以下調試鉤子函數： * onRenderTracked * onRenderTriggered 3.[`<KeepAlive>`](https://cn.vuejs.org/api/built-in-components.html#keepalive) 觸發的鉤子 `onActivated ` `onDeactivated` >[danger] ##### 案例 ~~~html <template> <div class="about"> <h2>msg: {{msg}}</h2> <hr> <button @click="update">更新</button> </div> </template> <script lang="ts"> import { ref, onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from "vue" export default { beforeCreate () { console.log('beforeCreate()') }, created () { console.log('created') }, beforeMount () { console.log('beforeMount') }, mounted () { console.log('mounted') }, beforeUpdate () { console.log('beforeUpdate') }, updated () { console.log('updated') }, beforeUnmount () { console.log('beforeUnmount') }, unmounted () { console.log('unmounted') }, setup() { console.log('setup') const msg = ref('abc') const update = () => { msg.value += '--' } onBeforeMount(() => { console.log('--onBeforeMount') }) onMounted(() => { console.log('--onMounted') }) onBeforeUpdate(() => { console.log('--onBeforeUpdate') }) onUpdated(() => { console.log('--onUpdated') }) onBeforeUnmount(() => { console.log('--onBeforeUnmount') }) onUnmounted(() => { console.log('--onUnmounted') }) return { msg, update } } } </script> ~~~ * 第一次執行  * 點擊更新按鈕后執行  >[info] ## 官網 [生命周期鉤子](https://cn.vuejs.org/api/composition-api-lifecycle.html#onactivated)