Vue 教程：组合式函数实战——从网络请求到鼠标追踪的封装

快速概述

组合式函数（Composables）是 Vue 3 中用于封装有状态逻辑的核心工具，它解决了组件间逻辑复用困难、代码臃肿的问题。本文以网络请求和鼠标追踪为例，展示如何将可复用逻辑抽离为独立函数。适用场景包括数据获取、事件监听、状态管理等。前置环境要求：Node.js 16+、Vue 3.2+，推荐使用 Vite 创建项目。

核心概念与原理

组合式函数基于 Vue 3 的组合式 API（Composition API），通过 ref、reactive 等响应式 API 管理状态，利用生命周期钩子（如 onMounted、onUnmounted）处理副作用。其核心思想是“按逻辑关注点组织代码”，而非按选项（data、methods）分割。工作流程：定义函数 → 内部创建响应式数据 → 暴露操作与状态 → 组件中调用并解构使用。

实战步骤与代码

1. 创建项目

npm create vite@latest vue-composables-demo -- --template vue
cd vue-composables-demo
npm install
npm run dev

2. 封装网络请求组合式函数

创建 src/composables/useFetch.js：

import { ref } from 'vue'
export function useFetch(url) { const data = ref(null) const error = ref(null) const loading = ref(false)
async function fetchData() { loading.value = true try { const res = await fetch(url) data.value = await res.json() } catch (e) { error.value = e.message } finally { loading.value = false } }
return { data, error, loading, fetchData } }

在组件中使用：

<script setup> import { useFetch } from './composables/useFetch' const { data, loading, error, fetchData } = useFetch('https://api.example.com/posts') fetchData() </script>

3. 封装鼠标追踪组合式函数

创建 src/composables/useMouse.js：

import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() { const x = ref(0) const y = ref(0)
function update(event) { x.value = event.clientX y.value = event.clientY }
onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update))
return { x, y } }

组件中调用：

<script setup> import { useMouse } from './composables/useMouse' const { x, y } = useMouse() </script> <template> <p>鼠标位置: {{ x }}, {{ y }}</p> </template>

常见坑点与优化

• 响应式丢失：解构返回的 ref 时，若直接使用 const { x } = useMouse()，在模板中会自动解包，但在 JS 中需使用 x.value。
• 事件监听泄漏：在 onMounted 中添加的监听器必须在 onUnmounted 中移除，否则组件销毁后仍会触发，导致内存泄漏。
• 请求竞态：快速触发多次请求时，旧响应可能覆盖新数据。可使用 AbortController 或请求序号进行控制。
• 性能优化：对于高频事件（如 mousemove），可使用 requestAnimationFrame 节流，减少更新频率。

通过以上实践，你可以将任意有状态逻辑封装为组合式函数，提升代码复用性与可维护性。