Vue 组合式函数 (Composables)

学习使用组合式 API 封装可复用的逻辑 · 难度：入门 · +15XP

Vue 组合式函数

组合式函数（Composable）是利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。它类似于 React 的 Hooks，但更加灵活，基于 Vue 的响应式系统。通过组合式函数，你可以将组件中的逻辑提取到独立的函数中，提高代码的可维护性和复用性。

创建一个简单的 useCounter

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

在组件中使用

<script setup>
import { useCounter } from './useCounter'
const { count, double, increment, decrement } = useCounter(10)
</script>

优势

练习提示

创建一个 useMousePosition 组合式函数，监听鼠标移动并返回 x 和 y 响应式坐标。然后在组件中使用它显示鼠标位置。