Vue3组合式函数实例详解

以下为你提供 4 个实用的 Vue3 组合式函数（Composition API）实例，包含详细代码和使用说明：

1. 状态切换 Hook（useToggle）

import { ref } from 'vue'

export function useToggle(initialValue = false) {
  const state = ref(initialValue)
  
  const toggle = () => {
    state.value = !state.value
  }
  
  const set = (value) => {
    state.value = Boolean(value)
  }
  
  return {
    state,
    toggle,
    set
  }
}

// 使用示例
// const { state: isOpen, toggle: toggleMenu } = useToggle()
// <button @click="toggleMenu">{{ isOpen ? 'Close' : 'Open' }}</button>

功能说明：

• 创建布尔值状态管理
• 提供切换方法和强制设置方法
• 适用于开关类组件（下拉菜单、模态框等）

2. 网络请求 Hook（useFetch）

import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

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

  return {
    data,
    error,
    loading,
    execute
  }
}

// 使用示例
// const { data, loading, execute } = useFetch('/api/data')
// onMounted(() => execute())

功能说明：

• 封装 fetch 请求逻辑
• 自动管理加载状态和错误状态
• 支持手动触发请求
• 适用于需要复用请求逻辑的场景

3. 本地存储 Hook（useLocalStorage）

import { ref, watchEffect } from 'vue'

export function useLocalStorage(key, defaultValue) {
  const storedValue = localStorage.getItem(key)
  const state = ref(storedValue ? JSON.parse(storedValue) : defaultValue)

  watchEffect(() => {
    localStorage.setItem(key, JSON.stringify(state.value))
  })

  return state
}

// 使用示例
// const theme = useLocalStorage('theme', 'light')
// theme.value = 'dark' // 自动保存到 localStorage

功能说明：

• 自动同步状态到 localStorage
• 支持复杂对象存储（通过 JSON 序列化）
• 初始化时自动读取存储值
• 适用于主题设置、用户偏好等需要持久化的状态

4. 鼠标位置跟踪 Hook（useMousePosition）

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const update = (e) => {
    x.value = e.clientX
    y.value = e.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

// 使用示例
// const { x, y } = useMousePosition()
// <div>鼠标位置：{{ x }}, {{ y }}</div>

功能说明：

• 自动跟踪鼠标位置
• 自动注册/移除事件监听器
• 响应式更新坐标值
• 适用于需要鼠标交互的可视化组件

5. 防抖 Hook（useDebounce）

import { ref } from 'vue'

export function useDebounce(value, delay = 300) {
  const debouncedValue = ref(value.value)
  let timeout = null

  const updateValue = (newValue) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      debouncedValue.value = newValue
    }, delay)
  }

  watch(value, (newVal) => {
    updateValue(newVal)
  })

  return debouncedValue
}

// 使用示例
// const searchText = ref('')
// const debouncedText = useDebounce(searchText)
// watch(debouncedText, value => fetchResults(value))

功能说明：

• 实现输入防抖功能
• 延迟更新最终值
• 自动清理定时器
• 适用于搜索建议、表单验证等场景

组合式函数优势：

1. 逻辑复用：将通用逻辑封装为独立单元
2. 代码组织：按功能而非选项组织代码
3. 类型推导：更好的 TypeScript 支持
4. 灵活组合：多个 Hook 可自由组合使用
5. 响应式管理：自动处理响应式依赖

每个示例都遵循组合式 API 的最佳实践，包含清晰的关注点分离和响应式处理。建议通过实际项目练习来加深理解，可以根据具体需求扩展这些基础 Hook 的功能。