714765…

组合式API的生命周期钩子函数

onMounted（）
onUpdated()
onUnmounted()
onBeforeMount()
onBeforeUpdate()
onBeforeUnmount()
onErrorCaptured()
onRenderTracked()
onRenderTriggered()
onActivated()
onDeactivated()
onServerPrefetch() 与选项式API的区别是没有created（）和beforeCreated（）而且每个钩子前都加上了前缀on。注意在组合式API中使用这些生命周期钩子函数，需要写成<script setup>

onMounted()

注册一个回调函数，在组件挂载完成后执行。
写法：

组件在以下情况下被视为已挂载

其所有同步子组件都已经被挂载（不包含异步组件或<Suspense>树内的组件）。
其自身的DOM数已经创建完成并插入了父容器中。注意仅当根容器在文档中是，才可以保证组件DOM树也在文档中。
使用场景
这个钩子通常用于执行需要访问组件所渲染的DOM 树相关的副作用，或是在服务器端渲染应用中用于确保DOM相关代码仅在客户端执行。
注意
这个钩子在服务器端渲染期间不会被调用。

onUpdated()

注册一个回调函数，在组件因为响应式状态变更而更新其DOM树之后调用。
写法：

更新时机
父组件的更新钩子将在其子组件的更新钩子之后调用
使用
这个钩子会在组纪检的任意DOM更新后调用，这些更新可能是由不同的状态变更导致的。如果需要在某个特定的状态更改后访问更新后的DOM，请使用nextTick（）作为替代。
注意：这个钩子在服务器端渲染期间不会被调用。不要在update钩子中更改组件的状态，这可能会导致无限的更新循环

onUnmounted()

注册一个回调函数，在组件实例被卸载之后调用。
写法：

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

其所有子组件都已经被卸载
所有相关的响应式作用（渲染作用以及setup（）时创建的计算属性和侦听器）都已经停止
使用
可以在这个钩子中手动清理一些副作用，例如计时器、DOM事件监听器或者与服务器的连接。
注意
这个钩子在服务器端渲染期间不会被调用。

onBeforeMount()

注册一个钩子，在组件被挂载之前被调用。
写法：

时机当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建DOM节点。它即将首次执行DOM渲染过程
注意
这个钩子在服务器端渲染期间不会被调用。

onBeforeUpdate()

注册一个钩子，在组件即将因为响应式状态变更而更新其DOM 树之前调用。
写法：

时机：这个钩子可以用来在vue更新DOM之前访问DOM状态，在这个钩子中更改状态也是安全的。
注意
这个钩子在服务器端渲染期间不会被调用。

onBeforeUnmount()

注册一个钩子，在组件实例被卸载之前调用。
写法：

使用当这个钩子被调用时，组件是开依然还保有全部的功能。
注意
这个钩子在服务器端渲染期间不会被调用。

onErrorCaptured()

注册一个钩子，在捕获了后代组件传递的错误时调用（不能捕获自己的错误）
写法：

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

组件渲染
事件处理器
生命周期钩子
setup()函数
侦听器
自定义指令钩子
过渡钩子
钩子的组成
这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。
注意：接收错误的钩子里面不要错误，否则会陷入无限循环。这个钩子可以通过返回false来阻止错误继续向上传递

错误传递规则

默认情况下，所有的错误都会被发送到应用及的app.config.errorHandler(前提是这个函数已经定义），这样这些错误都能在一个统一的地方报告给分析服务。
如果组件的继承链或组件链上存在多个errorCaptured钩子，对于同一个错误，这些钩子会被按从底至上的顺序一一调用，这个过程被称为“向上传递”，类似于原生DOM事件的冒泡机制。
如果errorCaptured钩子本身抛出了一个错误，那么这个错误和原来捕获到的错误都将被发送到app.config.errorHandler.
errorCaptured钩子可以通过返回false来阻止错误继续向上传递。即表示“这个错误已经被处理了，请忽略”，它将阻止其他的errorCaptured钩子或者app.config.errorHandler因这个错误而被调用。

onRenderTracked()

注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用
注意：这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
写法：

onRenderTriggered()

注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。注意：这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

onServerPrefetch()只在服务端渲染中执行

注册一个异步函数，在组件实例在服务器上被渲染之前调用。
区别与选项式API的具体区别可以对照之前发的选项式API来查看对比。

vue3组合式API生命周期