一、引言

1.1 Composition API的重要性

1.2 技术价值与市场分析

class CompositionAPIAnalysis {
    /** Composition API优势分析 */
    static getAdvantages() {
        return {
            '代码复用率': '相比Mixins提升300%的逻辑复用能力',
            '类型安全': 'TypeScript支持度从60%提升到95%+',
            '可维护性': '复杂组件维护成本降低50%',
            '团队协作': '基于功能的代码组织提升协作效率40%',
            '包体积': 'Tree-shaking友好，减少最终包体积20%'
        };
    }

    /** 设计模式对比 */
    static getPatternComparison() {
        return {
            'Options API': {
                '简单场景': '⭐⭐⭐⭐⭐',
                '复杂状态': '⭐⭐',
                '逻辑复用': '⭐⭐',
                'TypeScript': '⭐⭐⭐',
                '测试友好': '⭐⭐⭐'
            },
            'Composition API': {
                '简单场景': '⭐⭐⭐⭐',
                '复杂状态': '⭐⭐⭐⭐⭐',
                '逻辑复用': '⭐⭐⭐⭐⭐',
                'TypeScript': '⭐⭐⭐⭐⭐',
                '测试友好': '⭐⭐⭐⭐⭐'
            },
            'React Hooks': {
                '简单场景': '⭐⭐⭐⭐',
                '复杂状态': '⭐⭐⭐⭐',
                '逻辑复用': '⭐⭐⭐⭐',
                'TypeScript': '⭐⭐⭐⭐',
                '测试友好': '⭐⭐⭐'
            }
        };
    }

    /** 业务价值指标 */
    static getBusinessMetrics() {
        return {
            '开发效率': '复杂功能开发时间减少35%',
            '代码质量': 'Bug率降低40%，代码重复率降低60%',
            '团队扩展': '新成员上手时间缩短50%',
            '长期维护': '技术债务减少55%',
            '重构成本': '组件重构工作量减少70%'
        };
    }
}

1.3 性能与开发体验基准

二、技术背景

2.1 Composition API架构原理

graph TB
    A[Composition API架构] --> B[响应式系统]
    A --> C[生命周期]
    A --> D[依赖注入]
    
    B --> B1[ref]
    B --> B2[reactive]
    B --> B3[computed]
    B --> B4[watch]
    
    C --> C1[setup]
    C --> C2[onMounted]
    C --> C3[onUpdated]
    C --> C4[onUnmounted]
    
    D --> D1[provide]
    D --> D2[inject]
    
    B1 --> E[组合函数]
    C1 --> E
    D1 --> E
    
    E --> F1[业务逻辑复用]
    E --> F2[状态管理]
    E --> F3[副作用管理]
    E --> F4[测试隔离]
    
    F1 --> G[可维护应用]
    F2 --> G
    F3 --> G
    F4 --> G

2.2 核心概念解析

class CompositionAPICore {
    // 响应式基础
    static getReactivePrimitives() {
        return {
            'ref': '包装基本类型，通过.value访问',
            'reactive': '包装对象，深度响应式',
            'readonly': '创建只读代理',
            'computed': '基于依赖的计算属性',
            'watch': '响应式数据监听'
        };
    }
    
    // 生命周期
    static getLifecycleHooks() {
        return {
            'onBeforeMount': '挂载前',
            'onMounted': '挂载后',
            'onBeforeUpdate': '更新前',
            'onUpdated': '更新后',
            'onBeforeUnmount': '卸载前',
            'onUnmounted': '卸载后',
            'onErrorCaptured': '错误捕获'
        };
    }
    
    // 依赖注入
    static getDependencyInjection() {
        return {
            'provide': '祖先组件提供数据',
            'inject': '后代组件注入数据',
            '应用场景': '主题、配置、用户信息等全局状态'
        };
    }
    
    // 组合式函数模式
    static getComposablePatterns() {
        return {
            '状态管理': 'useState, useReducer模式',
            '副作用': 'useEffect, 事件监听清理',
            'DOM操作': 'useRef, 模板引用',
            '异步处理': 'useAsync, 加载状态管理',
            '业务逻辑': '领域特定的use函数'
        };
    }
}

三、环境准备与配置

3.1 项目配置

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  
  // TypeScript配置
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.vue', '.json']
    }
  },
  
  // 开发服务器配置
  devServer: {
    port: 8080,
    hot: true
  }
})

3.2 TypeScript配置

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["vite/client", "vue"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx", 
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

四、核心设计模式

4.1 状态管理模式

// src/composables/useState.ts
import { ref, computed, watch, type Ref } from 'vue'

/**
 * 增强状态管理Hook
 * 提供类型安全的状态管理、持久化、验证等功能
 */
export function useState<T>(
  initialState: T,
  options: {
    key?: string
    validator?: (value: T) => boolean
    onChanged?: (newValue: T, oldValue: T) => void
    persist?: boolean
  } = {}
) {
  const {
    key,
    validator,
    onChanged,
    persist = false
  } = options

  // 从本地存储恢复状态
  const getInitialValue = (): T => {
    if (persist && key) {
      try {
        const stored = localStorage.getItem(key)
        if (stored) {
          return JSON.parse(stored)
        }
      } catch (error) {
        console.warn(`Failed to parse stored state for key "${key}":`, error)
      }
    }
    return initialState
  }

  const state = ref<T>(getInitialValue()) as Ref<T>
  const isLoading = ref(false)
  const error = ref<Error | null>(null)

  // 状态验证
  const isValid = computed(() => {
    if (validator) {
      return validator(state.value)
    }
    return true
  })

  // 状态设置器
  const setState = (newValue: T | ((prev: T) => T)) => {
    const oldValue = state.value
    const value = typeof newValue === 'function' 
      ? (newValue as Function)(oldValue)
      : newValue

    // 验证新值
    if (validator && !validator(value)) {
      throw new Error('State validation failed')
    }

    state.value = value
    onChanged?.(value, oldValue)
  }

  // 重置状态
  const reset = () => {
    setState(initialState)
  }

  // 异步设置状态（用于API调用）
  const setAsyncState = async (asyncFn: () => Promise<T>) => {
    isLoading.value = true
    error.value = null
    
    try {
      const result = await asyncFn()
      setState(result)
      return result
    } catch (err) {
      error.value = err as Error
      throw err
    } finally {
      isLoading.value = false
    }
  }

  // 持久化状态到本地存储
  if (persist && key) {
    watch(state, (newValue) => {
      try {
        localStorage.setItem(key, JSON.stringify(newValue))
      } catch (err) {
        console.error('Failed to persist state:', err)
      }
    }, { deep: true })
  }

  // 状态变化监听
  if (onChanged) {
    watch(state, (newValue, oldValue) => {
      onChanged(newValue, oldValue)
    }, { deep: true })
  }

  return {
    state: readonly(state),
    setState,
    setAsyncState,
    reset,
    isLoading: readonly(isLoading),
    error: readonly(error),
    isValid
  }
}

/**
 * 使用示例
 */
// 基础用法
const { state: count, setState: setCount } = useState(0)

// 带验证的状态
const { state: user, isValid: isUserValid } = useState(
  { name: '', age: 0 },
  {
    validator: (user) => user.name.length > 0 && user.age >= 0
  }
)

// 持久化状态
const { state: settings } = useState(
  { theme: 'light', language: 'zh-CN' },
  { 
    key: 'app-settings',
    persist: true 
  }
)

4.2 副作用管理模式

// src/composables/useEffect.ts
import { ref, onMounted, onUnmounted, watch, type WatchStopHandle } from 'vue'

/**
 * 副作用管理Hook
 * 统一管理DOM事件、定时器、订阅等副作用
 */
export function useEffect(
  effect: () => (void | (() => void)),
  dependencies?: any[]
) {
  let cleanup: (() => void) | void
  let stopWatch: WatchStopHandle | undefined

  const executeEffect = () => {
    // 执行清理函数
    if (cleanup) {
      cleanup()
    }
    // 执行副作用
    cleanup = effect()
  }

  if (dependencies) {
    // 依赖变化时重新执行
    stopWatch = watch(dependencies, executeEffect, { immediate: true, deep: true })
  } else {
    // 仅执行一次
    onMounted(executeEffect)
  }

  // 组件卸载时清理
  onUnmounted(() => {
    if (cleanup) {
      cleanup()
    }
    if (stopWatch) {
      stopWatch()
    }
  })
}

/**
 * 事件监听Hook
 */
export function useEventListener(
  target: Ref<EventTarget | null> | EventTarget,
  event: string,
  handler: (event: Event) => void,
  options?: AddEventListenerOptions
) {
  useEffect(() => {
    const element = target && 'value' in target ? target.value : target
    if (!element) return

    element.addEventListener(event, handler, options)
    
    return () => {
      element.removeEventListener(event, handler, options)
    }
  }, [target, event, handler, options])
}

/**
 * 定时器Hook
 */
export function useInterval(
  callback: () => void,
  delay: Ref<number> | number
) {
  useEffect(() => {
    if (typeof delay !== 'number' && !delay.value) return
    
    const intervalId = setInterval(callback, typeof delay === 'number' ? delay : delay.value)
    
    return () => {
      clearInterval(intervalId)
    }
  }, [callback, delay])
}

export function useTimeout(
  callback: () => void,
  delay: Ref<number> | number
) {
  useEffect(() => {
    if (typeof delay !== 'number' && !delay.value) return
    
    const timeoutId = setTimeout(callback, typeof delay === 'number' ? delay : delay.value)
    
    return () => {
      clearTimeout(timeoutId)
    }
  }, [callback, delay])
}

/**
 * 网络请求Hook
 */
export function useFetch<T>(
  url: Ref<string> | string,
  options?: RequestInit
) {
  const data = ref<T | null>(null)
  const error = ref<Error | null>(null)
  const isLoading = ref(false)

  const execute = async (): Promise<T> => {
    isLoading.value = true
    error.value = null

    try {
      const response = await fetch(typeof url === 'string' ? url : url.value, options)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      const result = await response.json() as T
      data.value = result
      return result
    } catch (err) {
      error.value = err as Error
      throw err
    } finally {
      isLoading.value = false
    }
  }

  // 自动执行（可选）
  if (typeof url === 'string' || url.value) {
    useEffect(() => {
      execute()
    }, [url])
  }

  return {
    data: readonly(data),
    error: readonly(error),
    isLoading: readonly(isLoading),
    execute
  }
}

4.3 业务逻辑组合模式

// src/composables/useForm.ts
import { ref, computed, watch, type Ref } from 'vue'

interface FormField<T = any> {
  value: T
  required?: boolean
  validator?: (value: T) => string | boolean
  touched?: boolean
  dirty?: boolean
}

interface FormOptions {
  validateOnChange?: boolean
  submitOnValid?: boolean
}

/**
 * 表单管理Hook
 * 提供完整的表单状态管理、验证、提交功能
 */
export function useForm<T extends Record<string, any>>(
  initialValues: T,
  options: FormOptions = {}
) {
  const { validateOnChange = true, submitOnValid = true } = options

  // 表单字段状态
  const fields = ref(
    Object.keys(initialValues).reduce((acc, key) => {
      acc[key] = {
        value: initialValues[key],
        required: false,
        touched: false,
        dirty: false
      }
      return acc
    }, {} as Record<string, FormField>)
  )

  // 表单错误状态
  const errors = ref<Record<string, string>>({})
  const isSubmitting = ref(false)
  const submitCount = ref(0)

  // 计算属性
  const isValid = computed(() => Object.keys(errors.value).length === 0)
  const isDirty = computed(() => 
    Object.values(fields.value).some(field => field.dirty)
  )
  const isTouched = computed(() =>
    Object.values(fields.value).some(field => field.touched)
  )

  // 字段值获取器
  const values = computed(() => {
    return Object.keys(fields.value).reduce((acc, key) => {
      acc[key as keyof T] = fields.value[key].value
      return acc
    }, {} as T)
  })

  // 字段注册
  const register = (name: keyof T, fieldOptions: Partial<FormField> = {}) => {
    if (!fields.value[name as string]) {
      fields.value[name as string] = {
        value: initialValues[name] ?? '',
        required: false,
        touched: false,
        dirty: false,
        ...fieldOptions
      }
    }

    return {
      modelValue: computed({
        get: () => fields.value[name as string].value,
        set: (value) => updateField(name, value)
      }),
      onBlur: () => markAsTouched(name),
      onInput: () => markAsDirty(name)
    }
  }

  // 更新字段
  const updateField = (name: keyof T, value: any) => {
    const field = fields.value[name as string]
    if (!field) return

    field.value = value
    field.dirty = true

    if (validateOnChange) {
      validateField(name)
    }
  }

  // 标记字段为已触摸
  const markAsTouched = (name: keyof T) => {
    const field = fields.value[name as string]
    if (field) {
      field.touched = true
      validateField(name)
    }
  }

  // 标记字段为脏
  const markAsDirty = (name: keyof T) => {
    const field = fields.value[name as string]
    if (field) {
      field.dirty = true
    }
  }

  // 验证单个字段
  const validateField = (name: keyof T): string | boolean => {
    const field = fields.value[name as string]
    if (!field) return true

    let error = ''

    // 必填验证
    if (field.required && !field.value) {
      error = '此字段为必填项'
    }

    // 自定义验证
    if (field.validator && !error) {
      const result = field.validator(field.value)
      if (typeof result === 'string') {
        error = result
      } else if (result === false) {
        error = '验证失败'
      }
    }

    if (error) {
      errors.value[name as string] = error
    } else {
      delete errors.value[name as string]
    }

    return error || true
  }

  // 验证整个表单
  const validate = (): boolean => {
    Object.keys(fields.value).forEach(key => {
      validateField(key as keyof T)
    })
    return isValid.value
  }

  // 重置表单
  const reset = () => {
    Object.keys(fields.value).forEach(key => {
      const field = fields.value[key]
      field.value = initialValues[key as keyof T] ?? ''
      field.touched = false
      field.dirty = false
    })
    errors.value = {}
    submitCount.value = 0
  }

  // 设置错误
  const setError = (name: keyof T, message: string) => {
    errors.value[name as string] = message
  }

  // 设置多个错误
  const setErrors = (errorMap: Partial<Record<keyof T, string>>) => {
    Object.entries(errorMap).forEach(([key, message]) => {
      if (message) {
        errors.value[key] = message
      }
    })
  }

  // 清除错误
  const clearErrors = (name?: keyof T) => {
    if (name) {
      delete errors.value[name as string]
    } else {
      errors.value = {}
    }
  }

  // 提交表单
  const handleSubmit = async (onSubmit: (values: T) => Promise<void> | void) => {
    submitCount.value++

    // 验证表单
    if (!validate()) {
      if (!submitOnValid) {
        return
      }
      throw new Error('表单验证失败')
    }

    isSubmitting.value = true
    try {
      await onSubmit(values.value)
    } finally {
      isSubmitting.value = false
    }
  }

  return {
    // 状态
    values: readonly(values),
    errors: readonly(errors),
    isSubmitting: readonly(isSubmitting),
    isValid,
    isDirty,
    isTouched,
    submitCount: readonly(submitCount),

    // 方法
    register,
    updateField,
    validate,
    reset,
    setError,
    setErrors,
    clearErrors,
    handleSubmit,
    markAsTouched
  }
}

五、高级设计模式

5.1 提供者/注入器模式

// src/composables/useProvider.ts
import { inject, provide, type InjectionKey, type Ref } from 'vue'

/**
 * 创建类型安全的提供者/注入器
 */
export function createContext<T>(defaultValue: T, key?: string) {
  const injectionKey: InjectionKey<T> = Symbol(key || 'context')
  
  return {
    provide: (value: T) => provide(injectionKey, value),
    inject: () => inject(injectionKey, defaultValue)
  }
}

/**
 * 主题上下文示例
 */
interface Theme {
  mode: 'light' | 'dark'
  colors: {
    primary: string
    secondary: string
    background: string
    text: string
  }
}

const { provide: provideTheme, inject: useTheme } = createContext<Theme>({
  mode: 'light',
  colors: {
    primary: '#007acc',
    secondary: '#ff4757',
    background: '#ffffff',
    text: '#2c3e50'
  }
}, 'theme')

/**
 * 用户认证上下文
 */
interface User {
  id: string
  name: string
  email: string
  roles: string[]
}

interface AuthContext {
  user: Ref<User | null>
  isAuthenticated: Ref<boolean>
  login: (credentials: { email: string; password: string }) => Promise<void>
  logout: () => Promise<void>
  register: (userData: Omit<User, 'id'> & { password: string }) => Promise<void>
}

const { provide: provideAuth, inject: useAuth } = createContext<AuthContext>({
  user: ref(null),
  isAuthenticated: ref(false),
  login: async () => { throw new Error('未实现') },
  logout: async () => { throw new Error('未实现') },
  register: async () => { throw new Error('未实现') }
}, 'auth')

/**
 * 通知系统上下文
 */
interface Notification {
  id: string
  type: 'success' | 'error' | 'warning' | 'info'
  title: string
  message: string
  duration?: number
}

interface NotificationContext {
  notifications: Ref<Notification[]>
  add: (notification: Omit<Notification, 'id'>) => void
  remove: (id: string) => void
  clear: () => void
}

const { provide: provideNotification, inject: useNotification } = createContext<NotificationContext>({
  notifications: ref([]),
  add: () => {},
  remove: () => {},
  clear: () => {}
}, 'notification')

5.2 中间件模式

// src/composables/useMiddleware.ts
type Middleware<T> = (context: T, next: () => void) => void

/**
 * 中间件管道实现
 */
export function createMiddlewarePipeline<T>() {
  const middlewares: Middleware<T>[] = []

  const use = (middleware: Middleware<T>) => {
    middlewares.push(middleware)
  }

  const execute = async (context: T): Promise<void> => {
    let index = 0
    
    const next = async (): Promise<void> => {
      if (index < middlewares.length) {
        const middleware = middlewares[index]
        index++
        await middleware(context, next)
      }
    }

    await next()
  }

  return { use, execute }
}

/**
 * 组合式中间件示例
 */

// 日志中间件
export function createLoggerMiddleware(name: string) {
  return (context: any, next: () => void) => {
    console.log(`[${name}] 开始执行`, context)
    next()
    console.log(`[${name}] 执行完成`, context)
  }
}

// 验证中间件
export function createValidationMiddleware(validator: (data: any) => boolean) {
  return (context: any, next: () => void) => {
    if (!validator(context)) {
      throw new Error('验证失败')
    }
    next()
  }
}

// 异步中间件
export function createAsyncMiddleware(asyncFn: (context: any) => Promise<void>) {
  return async (context: any, next: () => void) => {
    await asyncFn(context)
    next()
  }
}

/**
 * 使用示例：API调用管道
 */
interface ApiContext {
  url: string
  options: RequestInit
  response?: Response
  data?: any
  error?: Error
}

export function useApiPipeline() {
  const pipeline = createMiddlewarePipeline<ApiContext>()

  // 添加中间件
  pipeline.use(createLoggerMiddleware('API调用'))
  
  pipeline.use(createValidationMiddleware((context: ApiContext) => {
    return !!context.url && context.url.startsWith('/api/')
  }))

  pipeline.use(async (context, next) => {
    try {
      context.response = await fetch(context.url, context.options)
      next()
    } catch (error) {
      context.error = error as Error
    }
  })

  pipeline.use(async (context, next) => {
    if (context.response && context.response.ok) {
      context.data = await context.response.json()
    }
    next()
  })

  const execute = async (url: string, options: RequestInit = {}) => {
    const context: ApiContext = { url, options }
    await pipeline.execute(context)
    return context
  }

  return { execute }
}

六、实际应用示例

6.1 数据表格组件

<!-- src/components/DataTable.vue -->
<template>
  <div class="data-table">
    <!-- 工具栏 -->
    <div class="table-toolbar">
      <div class="left-actions">
        <button @click="refresh" :disabled="isLoading">
          {{ isLoading ? '加载中...' : '刷新' }}
        </button>
        <button @click="exportData" :disabled="!data.length">
          导出
        </button>
      </div>
      
      <div class="right-actions">
        <input 
          v-model="filters.search" 
          placeholder="搜索..."
          @input="debouncedSearch"
        />
        <select v-model="filters.sortBy">
          <option value="">排序方式</option>
          <option 
            v-for="column in columns" 
            :key="column.key" 
            :value="column.key"
          >
            {{ column.title }}
          </option>
        </select>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th 
              v-for="column in columns" 
              :key="column.key"
              @click="sort(column.key)"
              :class="{ sortable: column.sortable, active: sortBy === column.key }"
            >
              {{ column.title }}
              <span v-if="sortBy === column.key" class="sort-indicator">
                {{ sortOrder === 'asc' ? '↑' : '↓' }}
              </span>
            </th>
            <th v-if="hasActions">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in paginatedData" :key="item.id">
            <td v-for="column in columns" :key="column.key">
              <slot 
                :name="`column-${column.key}`" 
                :value="item[column.key]" 
                :item="item"
              >
                {{ item[column.key] }}
              </slot>
            </td>
            <td v-if="hasActions" class="actions">
              <slot name="actions" :item="item"></slot>
            </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 空状态 -->
      <div v-if="!data.length && !isLoading" class="empty-state">
        <slot name="empty">
          暂无数据
        </slot>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table-pagination">
      <span>共 {{ total }} 条记录</span>
      
      <div class="pagination-controls">
        <button 
          @click="previousPage" 
          :disabled="currentPage === 1"
        >
          上一页
        </button>
        
        <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
        
        <button 
          @click="nextPage" 
          :disabled="currentPage === totalPages"
        >
          下一页
        </button>
      </div>
      
      <select v-model="pageSize">
        <option value="10">10条/页</option>
        <option value="20">20条/页</option>
        <option value="50">50条/页</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { usePagination } from '@/composables/usePagination'
import { useSearch } from '@/composables/useSearch'
import { useSort } from '@/composables/useSort'

interface Column {
  key: string
  title: string
  sortable?: boolean
  width?: string
}

interface Props {
  columns: Column[]
  data: any[]
  total?: number
  loading?: boolean
  pageSize?: number
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  total: 0,
  loading: false,
  pageSize: 10
})

const emit = defineEmits<{
  'update:page': [page: number]
  'update:pageSize': [pageSize: number]
  'sort-change': [sortBy: string, sortOrder: 'asc' | 'desc']
  'search': [search: string]
}>()

// 使用组合式函数
const { 
  searchTerm, 
  filteredData, 
  debouncedSearch 
} = useSearch(props.data, ['name', 'email'])

const { 
  sortBy, 
  sortOrder, 
  sortedData, 
  sort 
} = useSort(filteredData, { key: 'id', order: 'desc' })

const {
  currentPage,
  pageSize: localPageSize,
  totalPages,
  paginatedData,
  nextPage,
  previousPage,
  setPage
} = usePagination(sortedData, props.pageSize)

// 计算属性
const isLoading = computed(() => props.loading)
const total = computed(() => props.total || props.data.length)
const hasActions = computed(() => !!useSlots().actions)

// 监听器
watch(localPageSize, (newSize) => {
  emit('update:pageSize', newSize)
})

watch(currentPage, (newPage) => {
  emit('update:page', newPage)
})

watch([sortBy, sortOrder], ([newSortBy, newSortOrder]) => {
  emit('sort-change', newSortBy, newSortOrder)
})

watch(searchTerm, (newSearch) => {
  emit('search', newSearch)
})

// 方法
const refresh = () => {
  emit('update:page', 1)
}

const exportData = () => {
  // 导出逻辑
  console.log('导出数据:', sortedData.value)
}
</script>

<style scoped>
.data-table {
  width: 100%;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  background: #f0f0f0;
}

th.active {
  background: #e3f2fd;
}

.sort-indicator {
  margin-left: 0.5rem;
}

.actions {
  white-space: nowrap;
}

.empty-state {
  padding: 3rem;
  text-align: center;
  color: #666;
}

.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

6.2 组合式函数实现

// src/composables/usePagination.ts
import { ref, computed, watch } from 'vue'

interface PaginationOptions {
  page?: number
  pageSize?: number
}

export function usePagination<T>(
  data: T[],
  options: PaginationOptions = {}
) {
  const { page = 1, pageSize = 10 } = options

  const currentPage = ref(page)
  const localPageSize = ref(pageSize)

  // 计算属性
  const total = computed(() => data.length)
  const totalPages = computed(() => Math.ceil(total.value / localPageSize.value))
  
  const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * localPageSize.value
    const end = start + localPageSize.value
    return data.slice(start, end)
  })

  const hasPrevious = computed(() => currentPage.value > 1)
  const hasNext = computed(() => currentPage.value < totalPages.value)

  // 方法
  const setPage = (page: number) => {
    if (page >= 1 && page <= totalPages.value) {
      currentPage.value = page
    }
  }

  const nextPage = () => {
    if (hasNext.value) {
      currentPage.value++
    }
  }

  const previousPage = () => {
    if (hasPrevious.value) {
      currentPage.value--
    }
  }

  const setPageSize = (size: number) => {
    localPageSize.value = size
    // 重置到第一页
    currentPage.value = 1
  }

  // 监听数据变化，重置页码
  watch(data, () => {
    if (currentPage.value > totalPages.value) {
      currentPage.value = totalPages.value || 1
    }
  })

  return {
    // 状态
    currentPage: readonly(currentPage),
    pageSize: readonly(localPageSize),
    total: readonly(total),
    totalPages: readonly(totalPages),
    paginatedData,
    
    // 计算属性
    hasPrevious,
    hasNext,
    
    // 方法
    setPage,
    nextPage,
    previousPage,
    setPageSize
  }
}

// src/composables/useSearch.ts
import { ref, computed, watch } from 'vue'

export function useSearch<T>(
  data: T[],
  searchFields: string[] = [],
  options: {
    debounce?: number
    caseSensitive?: boolean
  } = {}
) {
  const { debounce = 300, caseSensitive = false } = options

  const searchTerm = ref('')
  const debouncedSearchTerm = ref('')
  let debounceTimer: number | null = null

  // 防抖搜索
  const updateDebouncedSearch = (value: string) => {
    if (debounceTimer) {
      clearTimeout(debounceTimer)
    }
    
    debounceTimer = window.setTimeout(() => {
      debouncedSearchTerm.value = value
    }, debounce)
  }

  // 搜索逻辑
  const filteredData = computed(() => {
    if (!debouncedSearchTerm.value) return data
    
    const term = caseSensitive 
      ? debouncedSearchTerm.value 
      : debouncedSearchTerm.value.toLowerCase()
    
    return data.filter(item => {
      return searchFields.some(field => {
        const value = String(getNestedValue(item, field))
        const searchValue = caseSensitive ? value : value.toLowerCase()
        return searchValue.includes(term)
      })
    })
  })

  // 获取嵌套对象值
  const getNestedValue = (obj: any, path: string) => {
    return path.split('.').reduce((acc, part) => {
      return acc && acc[part] !== undefined ? acc[part] : null
    }, obj)
  }

  // 监听搜索词变化
  watch(searchTerm, updateDebouncedSearch)

  return {
    searchTerm,
    debouncedSearchTerm: readonly(debouncedSearchTerm),
    filteredData,
    updateSearch: (term: string) => {
      searchTerm.value = term
    }
  }
}

七、测试策略

7.1 组合式函数测试

// tests/unit/composables/usePagination.spec.ts
import { describe, it, expect } from 'vitest'
import { usePagination } from '@/composables/usePagination'

describe('usePagination', () => {
  const mockData = Array.from({ length: 25 }, (_, i) => ({ id: i + 1, name: `Item ${i + 1}` }))

  it('应该正确初始化分页', () => {
    const { currentPage, pageSize, total, totalPages } = usePagination(mockData)
    
    expect(currentPage.value).toBe(1)
    expect(pageSize.value).toBe(10)
    expect(total.value).toBe(25)
    expect(totalPages.value).toBe(3)
  })

  it('应该返回正确的分页数据', () => {
    const { paginatedData } = usePagination(mockData, { pageSize: 5 })
    
    expect(paginatedData.value).toHaveLength(5)
    expect(paginatedData.value[0].id).toBe(1)
  })

  it('应该处理页面导航', () => {
    const { currentPage, paginatedData, nextPage, previousPage, setPage } = usePagination(mockData, { pageSize: 5 })
    
    // 下一页
    nextPage()
    expect(currentPage.value).toBe(2)
    expect(paginatedData.value[0].id).toBe(6)
    
    // 上一页
    previousPage()
    expect(currentPage.value).toBe(1)
    
    // 设置特定页面
    setPage(3)
    expect(currentPage.value).toBe(3)
    expect(paginatedData.value[0].id).toBe(11)
  })

  it('应该处理边界情况', () => {
    const { currentPage, hasPrevious, hasNext, nextPage, previousPage } = usePagination(mockData, { pageSize: 100 })
    
    expect(hasPrevious.value).toBe(false)
    expect(hasNext.value).toBe(false)
    
    // 不能超过边界
    previousPage()
    expect(currentPage.value).toBe(1)
    
    nextPage()
    expect(currentPage.value).toBe(1)
  })
})

7.2 组件测试

// tests/unit/components/DataTable.spec.ts
import { mount } from '@vue/test-utils'
import DataTable from '@/components/DataTable.vue'
import { describe, it, expect } from 'vitest'

describe('DataTable', () => {
  const columns = [
    { key: 'id', title: 'ID' },
    { key: 'name', title: '名称' },
    { key: 'email', title: '邮箱' }
  ]

  const mockData = [
    { id: 1, name: '张三', email: 'zhang@example.com' },
    { id: 2, name: '李四', email: 'li@example.com' },
    { id: 3, name: '王五', email: 'wang@example.com' }
  ]

  it('应该正确渲染表格', () => {
    const wrapper = mount(DataTable, {
      props: { columns, data: mockData }
    })

    expect(wrapper.find('table').exists()).toBe(true)
    expect(wrapper.findAll('thead th')).toHaveLength(columns.length)
    expect(wrapper.findAll('tbody tr')).toHaveLength(mockData.length)
  })

  it('应该处理搜索功能', async () => {
    const wrapper = mount(DataTable, {
      props: { columns, data: mockData }
    })

    const searchInput = wrapper.find('input[placeholder="搜索..."]')
    await searchInput.setValue('张三')

    // 等待防抖
    await new Promise(resolve => setTimeout(resolve, 400))
    
    expect(wrapper.findAll('tbody tr')).toHaveLength(1)
    expect(wrapper.find('tbody tr td').text()).toBe('张三')
  })

  it('应该处理排序功能', async () => {
    const wrapper = mount(DataTable, {
      props: { columns, data: mockData }
    })

    const nameHeader = wrapper.find('th:contains("名称")')
    await nameHeader.trigger('click')

    expect(wrapper.emitted('sort-change')).toBeTruthy()
    expect(wrapper.emitted('sort-change')![0]).toEqual(['name', 'asc'])
  })

  it('应该处理分页', async () => {
    const largeData = Array.from({ length: 15 }, (_, i) => ({
      id: i + 1,
      name: `Item ${i + 1}`,
      email: `item${i + 1}@example.com`
    }))

    const wrapper = mount(DataTable, {
      props: { columns, data: largeData, pageSize: 5 }
    })

    expect(wrapper.findAll('tbody tr')).toHaveLength(5)

    const nextButton = wrapper.find('button:contains("下一页")')
    await nextButton.trigger('click')

    expect(wrapper.emitted('update:page')![0]).toEqual([2])
  })
})

八、总结

8.1 技术成果总结

核心模式实现

• •
  状态管理: 类型安全的状态管理，支持持久化、验证、异步操作
• •
  副作用管理: 统一的副作用生命周期管理，自动清理资源
• •
  业务逻辑组合: 领域特定的组合函数，提高代码复用率
• •
  提供者模式: 类型安全的依赖注入，改善组件通信
• •
  中间件模式: 可组合的业务逻辑管道，增强可扩展性

开发效率提升

8.2 最佳实践总结

设计原则

class CompositionAPIBestPractices {
    static getDesignPrinciples() {
        return {
            '单一职责': '每个组合函数只关注一个特定功能',
            '关注点分离': '将逻辑按功能而非生命周期组织',
            '组合优于继承': '通过函数组合构建复杂逻辑',
            '显式依赖': '明确声明依赖关系，提高可测试性',
            '不可变数据': '使用readonly确保数据流清晰'
        };
    }
    
    static getImplementationPatterns() {
        return {
            '自定义Hooks': '将可复用逻辑封装为use函数',
            '工厂函数': '创建可配置的组合函数',
            '提供者模式': '通过provide/inject共享状态',
            '中间件管道': '组合多个处理步骤',
            '适配器模式': '兼容不同数据源和API'
        };
    }
}

8.3 未来展望

技术发展趋势

class CompositionAPIFuture {
    static getTechnologyTrends() {
        return {
            '2024': [
                'Vue 3.4+ 响应式系统优化',
                '更好的DevTools集成',
                '服务器端渲染优化',
                '微前端架构支持',
                '构建工具链完善'
            ],
            '2025': [
                'Vite 4.0+ 构建性能提升',
                'WebAssembly集成',
                'AI辅助代码生成',
                '边缘计算部署',
                '跨平台组件体系'
            ]
        };
    }
    
    static getIndustryAdoption() {
        return {
            '大型企业应用': '复杂状态管理和团队协作需求',
            'SaaS产品': '需要高度可定制和可扩展的架构',
            '设计系统': '组件逻辑复用和主题定制',
            '微前端架构': '独立开发和部署的组件生态',
            '全栈应用': '前后端类型共享和API集成'
        };
    }
}