Vue3组合式API开发实战：setup语法糖与自定义Hooks复用

Vue3生态里组合式API已是默认写法。与选项式API按data、methods、computed切分的组织方式不同，组合式API把同一业务逻辑的代码聚在一段，组件逻辑增多时依然能保持可读性，跨组件复用也变成函数级别的组合。本文用完整示例说明setup语法糖、响应式状态与自定义Hooks。

script setup语法糖与响应式声明

script setup是组合式API的编译期简写，顶层变量、函数直接暴露给模板，省去return。ref用于基础类型，reactive用于对象。

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('组件挂载完成')
})
</script>

<template>
  <button @click="increment">点击 {{ count }}</button>
  <p>计算值：{{ doubled }}</p>
</template>

自定义Hooks封装请求逻辑

把加载状态、错误处理、请求触发封装成useRequest，组件只关心数据和状态，不写重复代码。

// src/composables/useRequest.ts
import { ref } from 'vue'

export function useRequest<T>(fetcher: () => Promise<T>) {
  const data = ref<T | null>(null)
  const loading = ref(false)
  const error = ref('')

  async function run() {
    loading.value = true
    error.value = ''
    try {
      data.value = await fetcher()
    } catch (e: any) {
      error.value = e.message || '请求失败'
    } finally {
      loading.value = false
    }
  }

  return { data, loading, error, run }
}

// 组件中使用
const { data, loading, run } = useRequest(() =>
  fetch('/api/user').then(r => r.json())
)
run()

provide与inject实现跨层级共享

深层组件需要共享状态时，props逐层传递冗余，用provide/inject在组件树中注入。

<script setup lang="ts">
// 顶层组件
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)
</script>

<script setup lang="ts">
// 任意深层子组件
import { inject } from 'vue'
const theme = inject('theme')
</script>

defineModel实现双向绑定

defineModel让子组件与父组件双向绑定声明简洁，替代旧版props+emit组合。

<script setup lang="ts">
// 子组件：自定义输入框
const model = defineModel<string>()
</script>

<template>
  <input v-model="model" />
</template>

<!-- 父组件用法 -->
<MyInput v-model="keyword" />

watchEffect自动追踪依赖

watchEffect自动收集用到的响应式变量，变量变化即执行副作用，适合搜索防抖、状态同步。

import { watchEffect } from 'vue'

watchEffect(() => {
  if (count.value > 10) {
    console.log('超过阈值，触发外部回调')
  }
})

组合式API配合TypeScript后，组件的props、事件、状态都有了类型推导，重构时IDE能直接爆出所有调用点。Vue3生态的组件库、工程化脚手架也都在此基础上扩展，把逻辑组织方式统一，团队协作成本随之下降。