Vue 3 提供各种钩子函数，允许开发者在组件生命周期的特定阶段执行自定义代码。主要钩子函数包括：setup()：在实例化之前执行，用于初始化状态、绑定事件和计算。beforeCreate()：在组件创建之前执行，props 和 data 不可用。created()：在组件创建之后执行，props 和 data 可用。beforeMount()：在挂载到 DOM 之前执行，DOM 元素已创建但未插入文档。mounted()：在挂载到 DOM 之后执行，适合进行 DOM 元素操作。beforeUp
Vue 3 钩子函数
Vue 3 中提供了各种钩子函数，允许开发者在组件生命周期的特定阶段拦截和执行自定义代码。这些钩子函数为创建可重用、可维护且高效的 Vue 应用程序提供了强大的工具。
主要钩子函数
Vue 3 中的主要钩子函数包括：
立即学习
“
前端免费学习笔记（深入）
”；
setup()：
这是 Vue 3 独有的新钩子，在组件实例化之前执行。它用于初始化组件状态、绑定事件处理程序和进行计算。
beforeCreate()：
在组件对象创建之前执行。此时，组件的 props 和 data 还不可用。
created()：
在组件对象创建之后执行。此时，组件的 props 和 data 可用，但 DOM 元素尚未创建。
beforeMount()：
在组件挂载到 DOM 之前执行。此时，组件的 DOM 元素已创建，但尚未插入到文档中。
mounted()：
在组件挂载到 DOM 之后执行。这是执行需要 DOM 元素操作的任务的理想位置。
beforeUpdate()：
在组件更新之前执行。此时，组件的 props 或 data 已更改，但 DOM 元素尚未更新。
updated()：
在组件更新之后执行。这是更新 DOM 元素的理想位置。
beforeDestroy()：
在组件销毁之前执行。此时，组件的 DOM 元素仍在文档中，但即将被移除。
destroyed()：
在组件销毁之后执行。此时，组件的 DOM 元素已从文档中移除，并且所有关联的事件处理程序和计时器都已取消。
其他钩子函数
Vue-router参考手册
Vue-router参考手册下载
下载
除了主要钩子函数外，Vue 3 还提供了以下附加钩子函数：
onActivated()：
在组件激活时执行（对于 keep-alive 组件）。
onDeactivated()：
在组件停用时执行（对于 keep-alive 组件）。
errorCaptured()：
当组件或其子组件抛出错误时执行。
renderTracked()：
当 Vue 跟踪对响应式对象的访问时执行。
renderTriggered()：
当 Vue 触发组件重新渲染时执行。
使用钩子函数
要使用钩子函数，只需在 Vue 组件内定义它们。钩子函数名称必须以 "on" 前缀开头。例如：
在上面的示例中，我们使用了
钩子来初始化组件状态，并在
和
钩子中记录了组件的生命周期事件。
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return {
count
}
},
created() {
console.log('组件已创建')
},
mounted() {
console.log('组件已挂载')
}
}setup()created()mounted()