Vue3 Composables — 逻辑复用

学习Vue3的Composables模式，替代Vue2 Mixins的现代复用方案 · 难度：进阶 · +25XP

Composables 是什么？

Composable（组合式函数）是一个以 use 开头的函数，把有状态的逻辑封装起来，在多个组件中复用。

比如：鼠标位置追踪、数据请求、本地存储、计数器——这些逻辑可以抽成Composables，任何组件都可以用。

一个简单的 Composable

// useCounter.js
import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

在组件中使用：

setup() {
  const { count, increment, decrement, reset } = useCounter(10);
  return { count, increment, decrement, reset };
}

另一个例子：useMouse — 追踪鼠标位置

export function useMouse() {
  const x = ref(0), y = ref(0);
  function update(e) { x.value = e.pageX; y.value = e.pageY; }
  onMounted(() => window.addEventListener("mousemove", update));
  onUnmounted(() => window.removeEventListener("mousemove", update));
  return { x, y };
}

Composables vs Mixins（Vue2）

动手试试

右边用useCounter composable实现了两个独立的计数器——它们共享同一个逻辑函数，但各自的数据是独立的。