组合式 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>

• 另请参阅 服务器端渲染