组合式函数 (Composables)

组合式函数（Composables）是 Vue 组合式 API 中一个非常核心和强大的概念。它是一种利用 Vue 的响应式 API 来封装和复用有状态逻辑的模式。

什么是“有状态逻辑”？

有状态逻辑是指那些会随时间变化的逻辑。例如：

• 跟踪鼠标在页面上的位置。
• 从服务器获取数据，并管理其加载和错误状态。
• 监听窗口的尺寸变化。

在选项式 API 中，我们通常使用 Mixins 来复用这些逻辑，但 Mixins 存在一些问题，如命名冲突、来源不清晰等。组合式函数则提供了一种更清晰、更灵活的解决方案。

约定和规则

组合式函数是一个普通的 JavaScript 函数，但它遵循一些约定：

1. 命名：通常以 use 开头，例如 useMouse()、useFetch()。这是一种约定，告诉其他开发者这个函数内部使用了 Vue 的响应式 API。
2. 输入：可以接受响应式的 ref 或 reactive 对象作为参数，并且能够监听它们的变化。
3. 输出：总是返回一个包含多个响应式 ref 的普通对象，以便在组件中可以方便地解构使用。

示例：useMouse.js

让我们创建一个经典的组合式函数，用来跟踪鼠标的坐标。

src/composables/useMouse.js

import { ref, onMounted, onUnmounted } from 'vue'

// 按照约定，函数名为 `use` 开头
export function useMouse() {
  // 被封装和管理的“状态”
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以像组件一样使用生命周期钩子
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

这个函数做了什么？

1. 创建了两个响应式变量 x 和 y。
2. 使用 onMounted 注册了一个 mousemove 事件监听器来更新 x 和 y。
3. 使用 onUnmounted 在组件卸载时清除了这个监听器，防止内存泄漏。
4. 返回了包含 x 和 y 的对象。

在组件中使用

现在，任何组件都可以轻松地复用这个逻辑。

MouseTracker.vue

<script setup>
// 导入组合式函数
import { useMouse } from '../composables/useMouse.js'

// 在组件作用域内调用它
const { x, y } = useMouse()
</script>

<template>
  Mouse position is at: {{ x }}, {{ y }}
</template>

你甚至可以在同一个组件中多次使用它，它们各自的状态不会互相干扰。

优势

• 逻辑清晰：相关的逻辑被封装在同一个函数中，而不是散落在不同的选项里。
• 来源明确：在组件中使用时，我们清楚地知道 x 和 y 来自于 useMouse，不像 Mixins 那样来源模糊。
• 代码复用：可以在任意组件中轻松复用这些有状态逻辑。
• TypeScript 友好：普通的函数和变量使得类型推断非常自然。

组合式函数是组织和复用 Vue 3 应用逻辑的首选方式，它使得代码库更加整洁、可维护和可扩展。