组合式 API 深入

这一课你将能做到

1. 说出 <script setup> 与生命周期钩子（onMounted 等）的用法
2. 抽一个可复用的 composable（如 useToggle），并在两个组件使用
3. 对照 React Custom Hooks：复用「有状态逻辑」而不是复用 UI 模板

为什么要学

Options API 把相关逻辑拆到 data/methods/mounted 各段，大组件会碎。
组合式 API 按功能把状态、方法、侦听、生命周期放在一起；再抽成 useXxx 跨组件复用——对标 React Hooks 思路。

先建立图像

组件 A                组件 B
  useToggle()           useToggle()
  useTrackList()        …
        ↘ composables/useToggle.js

概念	Vue	React
组合单元	composable useXxx	custom hook useXxx
挂载后	onMounted	useEffect(() => {}, [])
卸载	onUnmounted	effect cleanup

跟着做

步骤 1：生命周期最小例

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const now = ref("");
let timer;
onMounted(() => {
  timer = setInterval(() => {
    now.value = new Date().toLocaleTimeString();
  }, 1000);
});
onUnmounted(() => clearInterval(timer));
</script>

<template>
  <p>{{ now }}</p>
</template>

进入页面开始跳秒；离开组件应清定时器（路由切换时验证）。

步骤 2：抽取 useToggle

// composables/useToggle.js
import { ref } from "vue";

export function useToggle(initial = false) {
  const on = ref(initial);
  function toggle() {
    on.value = !on.value;
  }
  function set(v) {
    on.value = v;
  }
  return { on, toggle, set };
}

步骤 3：两处使用

<script setup>
import { useToggle } from "./composables/useToggle";
const { on, toggle } = useToggle();
</script>
<template>
  <button type="button" @click="toggle">{{ on ? "开" : "关" }}</button>
</template>

再在另一个组件同样 import——状态各自独立，逻辑一份。

步骤 4：composable 内使用生命周期

import { ref, onMounted } from "vue";
export function usePageTitle(title) {
  onMounted(() => {
    document.title = title;
  });
}