組合式 API：生命週期鉤子 ​

onMounted() ​

在元件掛載後註冊一個回撥函式。

• 型別

  ts

  function onMounted(callback: () => void): void

• 詳細資訊

  一個元件在以下情況下被認為是已掛載：

  • 所有同步子元件都已掛載（不包括非同步元件或 <Suspense> 樹中的元件）。

  • 它的 DOM 樹已建立並插入到父容器中。注意，如果應用程式的根容器也在文件中，則僅保證元件的 DOM 樹在文件中。

  此鉤子通常用於執行需要訪問元件渲染 DOM 的副作用，或者在 伺服器端渲染的應用程式 中將 DOM 相關程式碼限制在客戶端。

  在伺服器端渲染期間不會呼叫此鉤子。

• 示例

  透過模板引用訪問元素

  vue

  <script setup>
  import { ref, onMounted } from 'vue'
  
  const el = ref()
  
  onMounted(() => {
    el.value // <div>
  })
  </script>
  
  <template>
    <div ref="el"></div>
  </template>

onUpdated() ​

在元件由於響應式狀態變化而更新其 DOM 樹後註冊一個回撥函式。

• 型別

  ts

  function onUpdated(callback: () => void): void

• 詳細資訊

  在呼叫子元件的更新鉤子之後呼叫父元件的更新鉤子。

  此鉤子會在元件的任何DOM更新之後被呼叫，這可能是由不同的狀態變化引起的，因為多個狀態變化可能為了效能原因被合併到單個渲染週期中。如果您需要在特定的狀態變化後訪問更新的DOM，請使用nextTick()。

  在伺服器端渲染期間不會呼叫此鉤子。

  警告

  不要在更新鉤子中修改元件狀態——這可能會導致無限更新迴圈！

• 示例

  訪問更新的DOM

  vue

  <script setup>
  import { ref, onUpdated } from 'vue'
  
  const count = ref(0)
  
  onUpdated(() => {
    // text content should be the same as current `count.value`
    console.log(document.getElementById('count').textContent)
  })
  </script>
  
  <template>
    <button id="count" @click="count++">{{ count }}</button>
  </template>

onUnmounted() ​

註冊一個在元件解除安裝後被呼叫的回撥。

• 型別

  ts

  function onUnmounted(callback: () => void): void

• 詳細資訊

  元件被認為已解除安裝，當以下條件滿足時：

  • 所有子元件都已解除安裝。

  • 所有關聯的響應式效果（渲染效果和在setup()期間建立的計算/觀察者）都已停止。

  使用此鉤子來清理手動建立的副作用，如計時器、DOM事件監聽器或伺服器連線。

  在伺服器端渲染期間不會呼叫此鉤子。

• 示例

  vue

  <script setup>
  import { onMounted, onUnmounted } from 'vue'
  
  let intervalId
  onMounted(() => {
    intervalId = setInterval(() => {
      // ...
    })
  })
  
  onUnmounted(() => clearInterval(intervalId))
  </script>

onBeforeMount() ​

註冊一個在元件即將掛載前被呼叫的鉤子。

• 型別

  ts

  function onBeforeMount(callback: () => void): void

• 詳細資訊

  當此鉤子被呼叫時，元件已經完成了其響應式狀態的設定，但還沒有建立DOM節點。它即將執行其DOM渲染效果。

  在伺服器端渲染期間不會呼叫此鉤子。

onBeforeUpdate() ​

註冊一個在元件因響應式狀態變化而即將更新其DOM樹前被呼叫的鉤子。

• 型別

  ts

  function onBeforeUpdate(callback: () => void): void

• 詳細資訊

  此鉤子可以在Vue更新DOM之前訪問DOM狀態。在此鉤子內修改元件狀態也是安全的。

  在伺服器端渲染期間不會呼叫此鉤子。

onBeforeUnmount() ​

註冊一個在元件例項即將解除安裝前被呼叫的鉤子。

• 型別

  ts

  function onBeforeUnmount(callback: () => void): void

• 詳細資訊

  當此鉤子被呼叫時，元件例項仍然是完全功能的。

  在伺服器端渲染期間不會呼叫此鉤子。

onErrorCaptured() ​

註冊一個在從子元件傳播的錯誤被捕獲時被呼叫的鉤子。

• 型別

  ts

  function onErrorCaptured(callback: ErrorCapturedHook): void
  
  type ErrorCapturedHook = (
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
  ) => boolean | void

• 詳細資訊

  錯誤可以來自以下來源：

  • 元件渲染
  • 事件處理器
  • 生命週期鉤子
  • setup()函式
  • 觀察者
  • 自定義指令鉤子
  • 過渡鉤子

  此鉤子接收三個引數：錯誤、觸發錯誤的元件例項，以及指定錯誤來源型別的字串資訊。

  提示

  在生產環境中，第三個引數（info）將是一個簡化的程式碼，而不是完整的資訊字串。您可以在生產錯誤程式碼參考中找到程式碼到字串的對映。

  您可以在errorCaptured()中修改元件狀態以向用戶顯示錯誤狀態。但是，錯誤狀態不應渲染導致錯誤的原始內容；否則，元件將被投入無限渲染迴圈。

  此鉤子可以返回false以停止錯誤進一步傳播。有關錯誤傳播的詳細資訊，請參閱以下內容。

  錯誤傳播規則

  • 預設情況下，如果已定義，所有錯誤都會發送到應用級別的app.config.errorHandler，以便這些錯誤可以在單個位置報告給分析服務。

  • 如果一個元件的繼承鏈或父鏈上存在多個 errorCaptured 鉤子，它們將按照從下到上的順序在同一錯誤上被呼叫。這類似於原生DOM事件的冒泡機制。

  • 如果 errorCaptured 鉤子本身丟擲錯誤，那麼這個錯誤和原始捕獲的錯誤都會發送到 app.config.errorHandler。

  • errorCaptured 鉤子可以返回 false 來阻止錯誤進一步傳播。這本質上意味著“這個錯誤已經被處理，應該被忽略。”這將阻止任何額外的 errorCaptured 鉤子或 app.config.errorHandler 為這個錯誤呼叫。

onRenderTracked() ​

註冊一個除錯鉤子，當元件的渲染效果追蹤到響應式依賴項時被呼叫。

此鉤子僅在開發模式下呼叫，伺服器端渲染期間不會呼叫。

• 型別

  ts

  function onRenderTracked(callback: DebuggerHook): void
  
  type DebuggerHook = (e: DebuggerEvent) => void
  
  type DebuggerEvent = {
    effect: ReactiveEffect
    target: object
    type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
    key: any
  }

• 另請參閱 深入反應性

onRenderTriggered() ​

註冊一個除錯鉤子，當響應式依賴項觸發元件的渲染效果重新執行時被呼叫。

此鉤子僅在開發模式下呼叫，伺服器端渲染期間不會呼叫。

• 型別

  ts

  function onRenderTriggered(callback: DebuggerHook): void
  
  type DebuggerHook = (e: DebuggerEvent) => void
  
  type DebuggerEvent = {
    effect: ReactiveEffect
    target: object
    type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
    key: any
    newValue?: any
    oldValue?: any
    oldTarget?: Map<any, any> | Set<any>
  }

• 另請參閱 深入反應性

onActivated() ​

註冊一個回撥，在元件例項作為 <KeepAlive> 快取的樹的一部分插入DOM後呼叫。

在伺服器端渲染期間不會呼叫此鉤子。

• 型別

  ts

  function onActivated(callback: () => void): void

• 另請參閱 指南 - 快取例項的生命週期

onDeactivated() ​

註冊一個回撥，在元件例項作為 <KeepAlive> 快取的樹的一部分從DOM中移除後呼叫。

在伺服器端渲染期間不會呼叫此鉤子。

• 型別

  ts

  function onDeactivated(callback: () => void): void

• 另請參閱 指南 - 快取例項的生命週期

onServerPrefetch() ​

註冊一個在元件例項在伺服器上渲染之前要解決的非同步函式。

• 型別

  ts

  function onServerPrefetch(callback: () => Promise<any>): void

• 詳細資訊

  如果回撥返回一個Promise，伺服器渲染器將在渲染元件之前等待Promise解決。

  此鉤子僅在伺服器端渲染期間呼叫，可用於執行僅伺服器端的資料獲取。

• 示例

  vue

  <script setup>
  import { ref, onServerPrefetch, onMounted } from 'vue'
  
  const data = ref(null)
  
  onServerPrefetch(async () => {
    // component is rendered as part of the initial request
    // pre-fetch data on server as it is faster than on the client
    data.value = await fetchOnServer(/* ... */)
  })
  
  onMounted(async () => {
    if (!data.value) {
      // if data is null on mount, it means the component
      // is dynamically rendered on the client. Perform a
      // client-side fetch instead.
      data.value = await fetchOnClient(/* ... */)
    }
  })
  </script>

• 另請參閱 伺服器端渲染