七、【Vue3】——自定义hook函数

### Vue3 Hook 函数详解 #### 组合式函数的概念 组合式函数是一种利用 Vue 的组合式 API 来封装和复用具有状态逻辑的函数[^1]。这种设计模式允许开发者更灵活地管理组件内部的状态以及行为。 #### 创建自定义Hook 为了创建一个自定义 hook，在 Vue 3 中通常会遵循以下结构： - **导入必要的API**：从 `vue` 库中引入所需的响应式工具，比如 `ref`, `reactive` 或者其他的 Composition API 方法。 - **编写业务逻辑**：实现具体的业务需求，如监听事件、处理异步操作等，并返回任何需要暴露给使用者的数据或方法。 - **导出自定义hook**：最后一步是将这个新的 hook 导出以便可以在其他地方被调用。 下面是一个简单的例子来展示如何构建并应用一个名为 `usePoint` 的自定义 hook ，用于追踪鼠标位置变化: ```javascript // hooks/usePoint.js 文件内容如下： import { onMounted, onUnmounted, reactive } from &#39;vue&#39; export default function usePoint () { const point = reactive({ x: 0, y: 0 }) const updatePosition = (event) => { point.x = event.pageX; point.y = event.pageY; } onMounted(() => window.addEventListener(&#39;mousemove&#39;, updatePosition)) onUnmounted(() => window.removeEventListener(&#39;mousemove&#39;, updatePosition)) return { ...point } } ``` 此代码片段展示了如何通过监听全局 mousemove 事件实时更新鼠标的 X 和 Y 坐标值，并确保这些更改能够反映在视图层面上。同时注意到了生命周期钩子 (`onMounted`, `onUnmounted`) 的使用以保证资源的有效管理和释放[^4]。 #### 使用自定义Hook 一旦有了上述定义好的 `usePoint` hook 后，则可以在任意组件内轻松集成它来进行交互开发工作： ```html <template> <div> <!-- 显示当前鼠标指针的位置 --> 当前点击时鼠标的坐标为：<br/> x：{{ point.x }}，y：{{ point.y }} </div> </template> <script> import { ref } from &#39;vue&#39; import usePoint from &#39;./hooks/usePoint&#39; // 引入我们刚刚编写的 hook export default { setup() { let sum = ref(0) // 调用 hooks 函数获取所需数据 let point = usePoint() return { sum, point } }, }; </script> ``` 这段模板部分显示了一个非常基础的应用场景——每当页面上的某个区域发生鼠标移动的时候都会触发相应的计算过程从而改变界面上呈现出来的数值信息。 #### 关于this上下文注意事项 值得注意的是，在 Vue 实例的方法(methods)，生命周期钩子(lifecycle hooks)以及其他地方如果采用箭头函数形式的话，那么其中的 `this` 不再指向 Vue 实例本身而是取决于外层作用域环境；因此建议在这种情况下避免使用箭头函数以免引起不必要的困惑或者错误[^3]。