vue3的生命周期

vue3的生命周期

1.onMount()

已挂载，组件完成初始渲染并创建DOM节点后

2.onUpdated()

已更新，在组件因为响应状态变更而跟心其DOM树之后调用

父组件的更新钩子将在其子组件的更新钩子之后调用

这个钩子在服务器端渲染期间不会被调用

3.onUnmounted()

在组件实例被卸载之后调用

一个组件在以下情况视为已卸载：

其所有子组件都已经被卸载

所有相应的响应式作用（渲染作用以及setup()时创建的计算属性和侦听器）都已经停止

可以这个钩子中手动清理一些副作用，例如计时器、DOM事件监听器或者与服务器的连接

这个钩子在服务器端渲染组件期间不会被调用

4.onErrorCaptured()

在捕获了后代组件传递的错误时调用

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

错误可以从以下几个来源中捕获：

• 组件渲染
• 事件处理器
• 生命周期钩子
• setup()函数
• 侦听器
• 自定义指令钩子
• 过渡钩子

这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串

错误传递规则：

默认情况下，所有错误都会被发送到应用及的 app.config.errorHandler (前提是这个函数已经定义)，这样这些错误都能在一个同意的地方报告给分析服务

如果组件的继承链或·组件链上存在多个errorCaptured钩子，对于同一个错误，这些钩子会被按从底至上的顺序一一调用。这个过程被称为“向上传递”，类似于原生DOM事件的冒泡机制

如果errorCaptured钩子本身抛出了一个错误，那么这个错误和原来捕获到的错误都将被发送到app.config.errorHandler

errorCaptured 钩子可以通过false来阻止错误继续向上传递。即表示“这个错误已经被处理了，应当被忽略”，它将阻止其他的errorCaptured 钩子或app.config.errorHandler 因这个错误而被调用

5.onActivated()

若组件实例是<keepAlive>缓存树的一部分，当组件被插入到DOM中时调用

6.onDeactivated()

若组件实例是<keepAlive>缓存树的一部分，当组件从DOM中被移出时调用

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

请注意：

• onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。
• 这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。