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 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() 钩子中记录了组件的生命周期事件。
