选项：生命周期

另请参阅

有关生命周期钩子的共享使用，请参阅指南 - 生命周期钩子

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 ​