【vue3】钩子函数详细介绍

1、setup()

这不是一个传统的钩子函数，但它是最主要的入口点，其为我们使用 Vue3 的 Composition API 新特性提供了统一的入口，用于初始化组件的状态和定义组合逻辑。

setup() 函数可以接收两个参数：props 和 context。然而，在使用

在

备注：defineProps() 是一个实用函数，用于在

2、reactive()

reactive() 用于使一个对象成为响应式的。它接受一个普通 JavaScript 对象作为参数，并返回一个经过代理的响应式版本的该对象。与 ref() 不同，你不需要使用 .value 来访问或修改对象的属性。

3、computed()

用于创建计算属性，当依赖的数据变化时，计算属性会被重新计算。

传统写法是嵌套在export default 下的setup()中，此处我们使用 

4、watch()

用于观察响应式数据的变化，并在数据发生变化时执行某些操作。

传统写法是嵌套在export default 下的setup()中，此处我们使用 

备注：由于 onBeforeMount() 钩子在服务端渲染（SSR）期间也会被调用，因此确保在这个钩子中执行的代码是可以在没有 DOM 环境下运行的，例如异步数据加载是可以的，而涉及到 DOM 操作的代码则不适合放在这里。此外，异步操作可能需要使用 async/await 语法来等待操作完成，如上面示例中所示。 

6、onMounted()

当组件被挂载到DOM中后调用。这是执行异步操作或初始化事件监听器的好地方。

备注：onMounted() 只在服务端渲染（SSR）中被跳过，因为它依赖于浏览器环境，不会在没有 DOM 的环境中执行。如果你的应用支持 SSR，确保在 onMounted 中执行的代码不会抛出错误，因为它们可能在没有 DOM 的环境中被调用。

 7、onBeforeUpdate()

在组件开始更新之前调用。

备注：

1、onBeforeUpdate() 钩子并不阻止更新的发生，它只是允许你在更新发生前执行一些代码。如果你需要在更新后执行代码，可以使用 onUpdated() 生命周期钩子。

2、在 Vue 3 的 Composition API 中，这些钩子函数应该在 setup() 函数内部定义，以便它们可以访问由 ref 或 reactive 创建的响应式状态。

 

8、onUpdated()

当组件完成更新后调用。这个钩子在服务器端渲染期间不被调用。

备注：onUpdated() 钩子在服务端渲染（SSR）期间不会被调用，因为它依赖于 DOM 更新，而 SSR 在客户端首次加载时才生成完整的 HTML。因此，确保你的 onUpdated 钩子中的代码不会在没有 DOM 的环境中引发错误。 

 8、onBeforeUnmount()

在组件被卸载并从DOM中移除之前调用。

备注：确保在组件生命周期的适当阶段进行清理是非常重要的，特别是在处理定时器、WebSocket 连接或外部资源时。onBeforeUnmount() 提供了一个执行这些清理任务的理想时机。 

9、onUnmounted()

当组件被卸载并从DOM中移除时调用。这是清除定时器、事件监听器等资源的好时机。

备注：在实际应用中，你可能会有更复杂的场景，例如订阅 WebSocket 连接、注册全局事件监听器等，在这些情况下，onUnmounted() 钩子同样可以用来确保在组件不再使用时进行适当的清理工作。

10、provide() 和 inject()

provide() 和 inject() 是用于实现祖先组件向后代组件注入数据或功能的一种方式，无需通过中间组件显式地传递 props。这对于跨多层组件树传递数据特别有用，可以避免 prop-drilling（道具钻孔）的问题。

1、父组件（Parent.vue）

2、子组件（Child.vue）

3、孙组件（Child.vue）

在这个示例中，Parent.vue 组件使用 provide() 向其子代组件树中注入了 theme 和 toggleTheme。Child.vue 和 Grandchild.vue 组件通过 inject() 来接收这些值。即使 Grandchild.vue 并没有直接从父组件接收这些值，它仍然能够访问到这些信息，因为它们已经被注入到了组件树中。

备注：值得注意的是，provide() 应该在一个组件的 setup() 函数中调用，而 inject() 可以在任何组件的 setup() 函数中使用，甚至在模板表达式中也可以直接使用注入的值。

 此外，inject() 允许提供一个默认值，以防注入的键在祖先组件中未被提供。例如：

const theme = inject('theme', 'light'); // 如果 'theme' 未被提供，则默认为 'light'

这样，即使某个组件忘记使用 provide() 提供数据，你的应用也不会崩溃，并且可以提供一个合理的默认行为。