把可复用逻辑写成 Vue 组合式函数

从重复逻辑开始

多个组件需要同一组状态与操作时，可以把它们提取为组合式函数。下面是一个最小的计数器例子：

import { ref, computed } from "vue";

export function useCounter(initial = 0) {
  const count = ref(initial);
  const doubled = computed(() => count.value * 2);
  const increment = () => count.value++;
  const reset = () => { count.value = initial; };

  return { count, doubled, increment, reset };
}

在组件里使用

<script setup lang="ts">
import { useCounter } from "./useCounter";
const { count, doubled, increment, reset } = useCounter();
</script>

<template>
  <p>计数：{{ count }}，两倍：{{ doubled }}</p>
  <button @click="increment">加一</button>
  <button @click="reset">重置</button>
</template>

留意状态的生命周期

这个例子里的 ref 定义在函数内部，每次调用都会创建独立状态。把状态移到模块顶层会改变共享范围，需要先想清楚不同组件是否应该共用数据。

涉及定时器、事件监听等副作用时，也需要在组件卸载时清理。