---
tags: Mike課程
---

# 常用的 Lifecycle Hooks
官網參考 :https://v3.vuejs.org/guide/instance.html#lifecycle-diagram

> 常見的生命週期
* onBeforeMount => DOM 渲染前執行
* onMounted => DOM 渲染完成後執行
* onBeforeUpdate => 資料更新DOM更改前執行
* onUpdated => 資料更新DOM更改後執行
* onBeforeUnmount => 組件銷毀前執行
* onUnmounted => 組件銷毀後執行
* onErrorCaptured => 當組件發出錯誤時後調用
* onRenderTracked => 監控 virtual DOM 重新選染時調用 ( 此事件告訴你操作什麼監聽了組件以及該操作的物件)
* onRenderTriggered => 監控 virtual DOM 重新選染時調用 ( 此事件告訴你操作什麼觸發了重新渲染，以及該操作的物件)

> 常用的案例

<script>
    const { ref, onBeforeMount, onMounted, onUpdated } = Vue;
    const App = {
      setup() {
        console.log('當vue掛載後  出現的位置');
        const idx = ref(0);
        setTimeout(() => {
          idx.value = 1;
          console.log(idx.value);
        }, 3000);
        onBeforeMount(() => {
          // DOM 渲染前
          console.log("DOM 渲染前");
        });
        onMounted(() => {
          // DOM 渲染完成後
          console.log("DOM 渲染完成後");
        });
        onUpdated(() => {
          // 在資料更改導致virtual DOM重新渲染後調用
          console.log("資料更改後");
        });

        return {
          idx,
        };
      },
    };

    Vue.createApp(App).mount("#app");
  </script>

* setTimeout 在執行3秒後vlue的值變成1 的順序