Vue Composables 原理和使用

// composables/useLifecycle.ts
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

export type LifecycleState = 
  'beforeCreate' | 'created' | 'beforeMount' |
  'mounted' | 'beforeUpdate' | 'updated' |
  'beforeUnmount' | 'unmounted'

export function useLifecycle() {
  const lifecycle = ref<LifecycleState>('beforeCreate')
  
  // 生命周期映射表
  const hooks = {
    created: () => lifecycle.value = 'created',
    beforeMount: () => lifecycle.value = 'beforeMount',
    mounted: () => lifecycle.value = 'mounted',
    beforeUpdate: () => lifecycle.value = 'beforeUpdate',
    updated: () => lifecycle.value = 'updated',
    beforeUnmount: () => lifecycle.value = 'beforeUnmount',
    unmounted: () => lifecycle.value = 'unmounted'
  }

  // 注册生命周期钩子
  onMounted(hooks.mounted)
  onUpdated(hooks.updated)
  onUnmounted(hooks.unmounted)

  // 返回带重置功能的对象
  return {
    lifecycle,
    reset: () => lifecycle.value = 'beforeCreate'
  }
}

// types.ts
export interface FetchResult<T> {
  data: Ref<T | null>
  error: Ref<Error | null>
  isLoading: Ref<boolean>
}

// useFetch.ts
import { ref } from 'vue'

export function useFetch<T>(url: string) {
  const data = ref<T | null>(null)
  const error = ref<Error | null>(null)
  const isLoading = ref(false)

  const execute = async () => {
    isLoading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json() as T
    } catch (err) {
      error.value = err as Error
    } finally {
      isLoading.value = false
    }
  }

  return { data, error, isLoading, execute }
}

// 泛型参数约束
export function useFetch<T extends object>(url: string) {
  // 约束泛型必须是对象类型
}

// 错误类型细化
class ApiError extends Error {
  statusCode: number
  
  constructor(message: string, statusCode: number) {
    super(message)
    this.statusCode = statusCode
  }
}

// 配置对象模式
interface FetchOptions {
  immediate?: boolean
  timeout?: number
}

function useFetch<T>(url: string, options?: FetchOptions) {
  // 实现配置处理
}

// 请求取消支持
const controller = new AbortController()

fetch(url, { 
  signal: controller.signal 
})

// 组件卸载时取消请求
onUnmounted(() => controller.abort())

<script setup lang="ts">
import { ref } from 'vue'
import { useFetch } from '@vueuse/core'

const { data, error, isFetching } = useFetch('https://api.example.com/data')

const fetchData = async () => {
    if (isFetching.value) return
    await data.value // 等待数据加载完成
    console.log(data.value)
}

if (error.value) {
    console.error('Fetch Error:', error.value)
}
</script>

<script setup lang="ts">
import { useStorage } from '@vueuse/core'

const name = useStorage('user-name', '')
</script>

<script setup lang="ts">
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()
</script>

<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

// composables/useTodoList.ts
import { ref, computed } from 'vue'

export interface Todo {
  id: number
  text: string
  completed: boolean
  createdAt: Date
}

export function useTodoList() {
  const todos = ref<Todo[]>([])
  const filter = ref<'all' | 'active' | 'completed'>('all')
  
  const addTodo = (text: string) => {
    if (!text.trim()) return
    
    todos.value.push({
      id: Date.now(),
      text: text.trim(),
      completed: false,
      createdAt: new Date()
    })
  }
  
  const removeTodo = (id: number) => {
    todos.value = todos.value.filter(todo => todo.id !== id)
  }
  
  const toggleTodo = (id: number) => {
    const todo = todos.value.find(todo => todo.id === id)
    if (todo) {
      todo.completed = !todo.completed
    }
  }
  
  const clearCompleted = () => {
    todos.value = todos.value.filter(todo => !todo.completed)
  }
  
  const filteredTodos = computed(() => {
    switch (filter.value) {
      case 'active':
        return todos.value.filter(todo => !todo.completed)
      case 'completed':
        return todos.value.filter(todo => todo.completed)
      default:
        return todos.value
    }
  })
  
  const stats = computed(() => {
    const total = todos.value.length
    const completed = todos.value.filter(todo => todo.completed).length
    const active = total - completed
    
    return { total, completed, active }
  })
  
  return {
    todos: filteredTodos,
    filter,
    stats,
    addTodo,
    removeTodo,
    toggleTodo,
    clearCompleted
  }
}