组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

组合式函数约定用驼峰命名法命名，并以“use”作为开头。

一个组合式函数可以调用一个或多个其他的组合式函数。

示例

在组件中使用组合式api实现鼠标跟踪功能，方法如下：

<template>
    鼠标位置： {{ x }}，{{ y }}
</template>

<script setup lang="ts">
import { onUnmounted, onMounted, ref } from 'vue';

const x = ref(0)
const y = ref(0)

// 监听鼠标移动事件，并更新x和y的值
function update(e: MouseEvent) {
    x.value = e.clientX
    y.value = e.clientY
}

// 监听mounted和unmounted事件，分别添加和移除鼠标移动事件监听器
onMounted(() => document.addEventListener('mousemove', update));
onUnmounted(() => document.removeEventListener('mousemove', update));
</script>

现在，我们想要在多个组件中使用鼠标跟踪功能，那么就可以把这个逻辑通过组合式函数的方法提取到外部文件中：

// mouse.ts
import { onUnmounted, onMounted, ref } from 'vue';

/**
 * 跟踪鼠标的组合式函数
 * @returns 
 */
export function useMouse() {
    const x = ref(0)
    const y = ref(0)

    // 监听鼠标移动事件，并更新x和y的值
    function update(e: MouseEvent) {
        x.value = e.clientX
        y.value = e.clientY
    }

    // 监听mounted和unmounted事件，分别添加和移除鼠标移动事件监听器
    onMounted(() => document.addEventListener('mousemove', update));
    onUnmounted(() => document.removeEventListener('mousemove', update));

    return {x, y}
}

在组件中进行使用：

<template>
    鼠标位置： {{ x }}，{{ y }}
</template>

<script setup lang="ts">
import { useMouse } from './mouse'

const { x, y } = useMouse()
</script>

组合式函数的核心逻辑和组合式api完全一致，我们做的只是把它移到一个外部函数中去，并返回需要暴露的状态。