Vue 3 组合式 API 实战：重构项目的最佳实践

前端开发技术日新月异，Vue 3 的组合式 API 让代码组织更加灵活。今天分享一些实战技巧。

响应式数据管理

ref 用于基础类型，reactive 用于对象，computed 创建计算属性：

const count = ref(0)
const user = reactive({ name: '冉冉', posts: [] })
const doubled = computed(() => count.value * 2)

逻辑复用：自定义 Hook

把重复逻辑封装成可复用的函数，让代码更简洁：

function useRequest(url) {
  const data = ref(null)
  const loading = ref(false)
  const fetch = async () => { /* ... */ }
  return { data, loading, fetch }
}

性能优化

虚拟列表处理大数据，防抖节流优化高频操作，路由懒加载减少首屏体积。