vue3 hooks

### Vue 3 Hooks 的实现原理与使用方法 Vue 3 中的 Hooks 是基于 Composition API 设计的一种组织和复用组件逻辑的方式。与 React 的 Hooks 不同，Vue 3 的 Hooks 更加紧密地集成在响应式系统中，能够直接访问组件的生命周期和响应式状态。 #### Hooks 的定义与作用 在 Vue 3 中，Hooks 通常是在 `setup()` 函数中使用的函数，它们用于封装和复用组件的逻辑。这些函数可以访问组件的响应式状态、生命周期钩子以及上下文信息。例如，`onMounted` 用于在组件挂载后执行某些操作，`ref` 和 `reactive` 则用于创建响应式数据[^2]。 ```javascript import { ref, onMounted } from 'vue'; export default { setup() { const count = ref(0); onMounted(() => { console.log('组件已挂载'); }); return { count }; } } ``` #### 生命周期 Hooks 的触发时机 Vue 3 提供了一系列生命周期钩子函数，这些函数在组件的不同生命周期阶段被调用。以下是一些常见的生命周期钩子： - `onBeforeMount`：组件挂载前触发。 - `onMounted`：组件挂载后触发。 - `onBeforeUpdate`：数据变更、视图更新前触发。 - `onUpdated`：数据变更、视图更新后触发。 - `onBeforeUnmount`：卸载前触发。 - `onUnmounted`：卸载后触发。 - `onActivated`：当组件被 `<KeepAlive>` 包裹并激活时触发。 - `onDeactivated`：当组件被 `<KeepAlive>` 包裹并失活时触发。 - `onErrorCaptured`：捕获子组件错误时触发。 - `onRenderTracked`：响应式依赖追踪时触发。 - `onRenderTriggered`：响应式依赖触发更新时触发[^3]。 ```javascript <script setup> import { onMounted } from 'vue' onMounted(() => { console.log('组件已挂载完成') }) </script> ``` #### Hooks 的实现原理 Vue 3 的 Hooks 是基于响应式系统和函数组件的 `setup()` 函数实现的。在 `setup()` 函数中，开发者可以调用各种 Hooks 来访问组件的生命周期、响应式数据和上下文信息。Vue 内部通过一个上下文对象来管理这些状态，并确保 Hooks 在正确的时机被调用。 在底层，Vue 使用了 `effect` 和 `track`/`trigger` 机制来实现响应式。当组件中的响应式数据发生变化时，Vue 会自动追踪这些变化并重新执行相关的副作用函数（如渲染函数或 `watch` 回调）。生命周期钩子本质上也是一种副作用函数，它们在组件的特定生命周期阶段被注册并执行[^1]。 #### 自定义 Hooks 的结构化思路 除了官方提供的生命周期 Hooks，开发者还可以创建自定义 Hooks 来封装可复用的逻辑。自定义 Hooks 通常以函数形式定义，并返回一组响应式数据或方法供组件使用。 ```javascript function useCounter() { const count = ref(0); function increment() { count.value++; } return { count, increment }; } ``` 在组件中使用该自定义 Hook： ```javascript import { useCounter } from './useCounter'; export default { setup() { const { count, increment } = useCounter(); return { count, increment }; } } ``` 通过这种方式，可以将组件逻辑模块化，提高代码的可维护性和复用性。 --- ###