Vue 组合式函数

掌握组合式函数（Composables）模式，抽离复用逻辑，构建可维护的代码。 · 难度：入门 · +15XP

什么是组合式函数？

组合式函数（Composables）是利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。它类似于 React 的 Hooks，但基于 Vue 的响应式系统。

创建第一个组合式函数

// useCounter.js
import { ref, computed } from 'vue'
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, double, increment }
}

在组件中使用

import { useCounter } from './useCounter'

const { count, double, increment } = useCounter(10)

组合多个函数

你可以在一个组合式函数中调用另一个组合式函数，实现逻辑组合。

export function useUser() {
  const { data, error } = useFetch('/api/user')
  const { count } = useCounter()
  return { user: data, count }
}

练习提示

1. 创建一个 useMousePosition 组合式函数，监听鼠标移动并返回 x, y 坐标。
2. 在组件中调用并显示鼠标位置。