Vue 3组合式API实战：script setup与Composable业务逻辑复用

Vue 3 的组合式 API 把组件逻辑从 data、methods、watch 的碎片化中解放出来。过去同一个业务逻辑被拆散到多个选项里，改动一处要全局翻找；现在按能力聚合，配合 script setup，代码更短、复用更直接。本文用实际场景讲透 ref、computed、watchEffect 与 Composable 的配合，并给出一个完整的搜索防抖封装。

ref与reactive：状态声明选型

ref 支持基本类型与对象，reactive 只接受对象。实践中的判断标准：单一值用 ref，结构化数据用 reactive 或 ref 包对象。

import { ref, reactive } from 'vue'
const count = ref(0)
const form = reactive({ name: '', age: 18 })

注意 reactive 对象的解构会丢失响应性，需要解构时用 toRefs 包裹后再解。

computed：派生状态自动更新

依赖其他响应式值计算出的结果用 computed，依赖未变时自动缓存，不要在模板里写复杂表达式。

const total = computed(() => form.price * form.count)

watchEffect与副作用清理

watchEffect 自动追踪依赖，依赖变化立即执行；适合请求、埋点、日志等副作用场景。组件卸载时监听自动移除，异步任务建议用 onUnmounted 手动清理。

watchEffect(async () => {
  if (!keyword.value) return
  const data = await fetchList(keyword.value)
  list.value = data
})

抽Composable：useDebouncedSearch完整封装

搜索防抖是高频交互，用 Composable 抽出来，每个页面一行代码接入：

// composables/useDebouncedSearch.ts
import { ref, watch } from 'vue'

export function useDebouncedSearch(searchFn: (kw: string) => Promise<any[]>, delay = 300) {
  const keyword = ref('')
  const loading = ref(false)
  const results = ref<any[]>([])

  let timer: ReturnType<typeof setTimeout> | null = null

  watch(keyword, (val) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(async () => {
      loading.value = true
      try {
        results.value = await searchFn(val)
      } finally {
        loading.value = false
      }
    }, delay)
  })

  return { keyword, loading, results }
}

组件内一行接入：const { keyword, loading, results } = useDebouncedSearch(queryUsers)。搜索逻辑、防抖、加载状态全部封装，组件模板只负责渲染。

defineProps与defineEmits：组件通信约定

script setup 下用编译宏声明入参与事件：

const props = defineProps<{ items: Item[] }>()
const emit = defineEmits<{ (e: 'select', id: number): void }>()

保持单向数据流：父组件通过 props 下发状态，子组件通过事件上抛变化，状态提升到公共父级，跨层共享再引入状态库。

组合式API迁移建议

新页面直接用 script setup + 组合式写法；存量项目按组件逐个迁移，一次只改一个组件，先抽 Composable 再替换模板。组合式 API 的收益体现在复用和可测试性，业务逻辑边界清晰之后，重构才有意义。