vue3钩子函数有哪些

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