選項：生命週期

另請參閱

有關生命週期鉤子的共享使用，請參閱指南 - 生命週期鉤子

beforeCreate

在例項初始化時呼叫。

型別

interface ComponentOptions {
  beforeCreate?(this: ComponentPublicInstance): void
}

詳情
在例項初始化和屬性解析後立即呼叫。
然後屬性將定義為響應式屬性，並設定狀態，如 data() 或 computed。
請注意，Composition API 的 setup() 鉤子在所有 Options API 鉤子之前呼叫，即使是 beforeCreate()。

created

在例項完成所有狀態相關選項的處理後呼叫。

型別

interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}

詳情
當此鉤子被呼叫時，以下內容已被設定：響應式資料、計算屬性、方法和監視器。但是，掛載階段尚未開始，且 $el 屬性尚不可用。

beforeMount

在元件將要掛載之前呼叫。

型別

interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

詳情
當此鉤子被呼叫時，元件已設定其響應式狀態，但尚未建立任何 DOM 節點。它即將執行其首次 DOM 渲染效果。
在伺服器端渲染期間不會呼叫此鉤子。

mounted

在元件被掛載後呼叫。

型別

interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

詳情
元件在以下情況下被視為已掛載：
- 所有同步子元件都已掛載（不包括非同步元件或 <Suspense> 樹內的元件）。
- 已建立並插入到父容器中的自身DOM樹。注意，這僅保證元件的DOM樹在文件內，如果應用程式的根容器也在文件內。
此鉤子通常用於執行需要訪問元件渲染DOM的副作用，或者將與DOM相關的程式碼限制在伺服器端渲染的應用程式中。
在伺服器端渲染期間不會呼叫此鉤子。

beforeUpdate

在元件因響應式狀態變化而即將更新其DOM樹之前呼叫。

型別

interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

詳情
此鉤子可以用來在Vue更新DOM之前訪問DOM狀態。在此鉤子內部修改元件狀態也是安全的。
在伺服器端渲染期間不會呼叫此鉤子。

updated

在元件因響應式狀態變化而更新其DOM樹之後呼叫。

型別

interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

詳情
父元件的updated鉤子在其子元件的updated鉤子之後呼叫。
此鉤子在元件的任何DOM更新之後呼叫，這可能是由於不同的狀態變化引起的。如果您需要在特定狀態變化後訪問更新的DOM，請使用nextTick()代替。
在伺服器端渲染期間不會呼叫此鉤子。
警告
不要在updated鉤子中修改元件狀態 - 這可能會導致無限更新迴圈！

beforeUnmount

在元件例項即將解除安裝之前呼叫。

型別

interface ComponentOptions {
  beforeUnmount?(this: ComponentPublicInstance): void
}

詳情
當此鉤子被呼叫時，元件例項仍然完全可用。
在伺服器端渲染期間不會呼叫此鉤子。

unmounted

在元件被解除安裝之後呼叫。

型別

interface ComponentOptions {
  unmounted?(this: ComponentPublicInstance): void
}

詳情
在以下情況下認為元件已解除安裝：
- 其所有子元件都已解除安裝。
- 其所有相關的響應式效果（渲染效果和在setup()期間建立的計算/偵聽器）都已停止。
使用此鉤子清理手動建立的副作用，如定時器、DOM事件監聽器或伺服器連線。
在伺服器端渲染期間不會呼叫此鉤子。

errorCaptured

當從子元件傳播的錯誤被捕獲時呼叫。

型別

interface ComponentOptions {
  errorCaptured?(
    this: ComponentPublicInstance,
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
  ): boolean | void
}

詳情
錯誤可以從以下來源捕獲
- 元件渲染
- 事件處理器
- 生命週期鉤子
- setup()函式
- 偵聽器
- 自定義指令鉤子
- 過渡鉤子
該鉤子接收三個引數：錯誤、觸發錯誤的元件例項以及指定錯誤源型別的字串。
提示
在生產環境中，第3個引數（info）將是一個簡化的程式碼，而不是完整的字串資訊。您可以在生產錯誤程式碼參考中找到程式碼到字串的對映。
您可以在errorCaptured()中修改元件狀態以向用戶顯示錯誤狀態。但是，重要的是錯誤狀態不應渲染導致錯誤的原始內容；否則，元件將陷入無限渲染迴圈。
此鉤子可以返回false以停止錯誤進一步傳播。請參閱下面的錯誤傳播詳情。
錯誤傳播規則
- 預設情況下，如果定義了，所有錯誤都會發送到應用級別的 app.config.errorHandler，以便這些錯誤可以集中報告給分析服務。
- 如果元件的繼承鏈或父鏈上存在多個 errorCaptured 鉤子，它們將按從下到上的順序在同一錯誤上呼叫。這類似於原生DOM事件的冒泡機制。
- 如果 errorCaptured 鉤子本身丟擲錯誤，這兩個錯誤都會發送到 app.config.errorHandler。
- errorCaptured 鉤子可以返回 false 以阻止錯誤進一步傳播。這本質上意味著“此錯誤已被處理，應忽略。”這將防止任何其他 errorCaptured 鉤子或 app.config.errorHandler 為此錯誤呼叫。

renderTracked

當元件的渲染效果跟蹤到響應式依賴項時呼叫。

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

型別

interface ComponentOptions {
  renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}

另請參閱 深入反應性

renderTriggered

當響應式依賴項觸發元件的渲染效果重新執行時呼叫。

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

型別

interface ComponentOptions {
  renderTriggered?(this: ComponentPublicInstance, 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>
}

另請參閱 深入反應性

activated

當元件例項作為由 <KeepAlive> 快取的樹的組成部分插入DOM後呼叫。

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

型別

interface ComponentOptions {
  activated?(this: ComponentPublicInstance): void
}

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

deactivated

當元件例項作為由 <KeepAlive> 快取的樹的組成部分從DOM中移除後呼叫。

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

型別

interface ComponentOptions {
  deactivated?(this: ComponentPublicInstance): void
}

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

serverPrefetch

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

型別

interface ComponentOptions {
  serverPrefetch?(this: ComponentPublicInstance): Promise<any>
}

詳情
如果鉤子返回一個Promise，伺服器渲染器將在渲染元件之前等待Promise解決。
此鉤子僅在伺服器端渲染期間呼叫，可用於執行伺服器端資料獲取。

示例

export default {
  data() {
    return {
      data: null
    }
  },
  async serverPrefetch() {
    // component is rendered as part of the initial request
    // pre-fetch data on server as it is faster than on the client
    this.data = await fetchOnServer(/* ... */)
  },
  async mounted() {
    if (!this.data) {
      // if data is null on mount, it means the component
      // is dynamically rendered on the client. Perform a
      // client-side fetch instead.
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

另請參閱 伺服器端渲染

在GitHub上編輯此頁面

選項：生命週期 ​

beforeCreate ​

created ​

beforeMount ​

mounted ​

beforeUpdate ​

updated ​

beforeUnmount ​

unmounted ​

errorCaptured ​

renderTracked ​

renderTriggered ​

activated ​

deactivated ​

serverPrefetch ​