vue3的组合式函数和普通函数的区别

Vue3 的组合式函数（Composable Functions）和普通函数（普通 JavaScript 函数）在代码组织、使用场景和核心能力上有显著区别，主要体现在以下几个方面：

---

1. 目的与使用场景

• 组合式函数
  专门用于封装有状态的逻辑，并在 Vue 组件之间复用逻辑。
  例如：封装数据请求、鼠标跟踪、表单验证等需要响应式状态和生命周期钩子的逻辑。

  // 组合式函数示例：useMouse
  import { ref, onMounted, onUnmounted } from 'vue'
  
  export function useMouse() {
    const x = ref(0)
    const y = ref(0)
  
    function update(e) {
      x.value = e.pageX
      y.value = e.pageY
    }
  
    onMounted(() => window.addEventListener('mousemove', update))
    onUnmounted(() => window.removeEventListener('mousemove', update))
  
    return { x, y } // 返回响应式状态
  }
  

• 普通函数
  处理纯计算逻辑，无状态，不依赖 Vue 的响应式系统或生命周期。
  例如：格式化日期、数学计算等工具函数。

  // 普通函数示例：格式化时间
  export function formatDate(date) {
    return new Date(date).toLocaleString()
  }
  

---

2. 响应式能力

• 组合式函数
  内部可以使用 Vue 的响应式 API（如 ref, reactive），并返回响应式对象。
  组合式函数与组件响应式系统深度集成，状态变化会自动触发组件更新。

• 普通函数
  不涉及响应式系统，无法直接使用 ref 或 reactive，除非显式传递响应式对象作为参数。

---

3. 生命周期钩子

• 组合式函数
  可以调用 Vue 的生命周期钩子（如 onMounted, onUnmounted），在特定阶段执行逻辑。
  例如：在组件挂载时添加事件监听，卸载时移除。

• 普通函数
  无法直接使用生命周期钩子，除非通过参数传递回调函数。

---

4. 代码组织方式

• 组合式函数
  鼓励将逻辑按功能拆分，而不是按选项（data, methods 等）组织。
  在组件中通过解构组合式函数返回值，实现逻辑的自由组合。

  <script setup>
  import { useMouse, useFetch } from './composables'
  
  const { x, y } = useMouse()
  const { data } = useFetch('/api/data')
  </script>
  

• 普通函数
  通常作为工具函数独立调用，无固定的代码组织模式。

---

5. 依赖关系

• 组合式函数
  可以依赖其他组合式函数，形成逻辑复用链。
  例如：useUser 可能依赖 useFetch。

• 普通函数
  通常无特殊依赖关系，或仅依赖其他普通函数。

---

6. 适用场景对比

特性	组合式函数	普通函数
状态管理	使用 ref/reactive	无状态或手动管理
生命周期	可调用 onMounted 等钩子	无法直接使用
响应式触发更新	自动触发组件更新	需手动处理
代码组织	按逻辑功能聚合	无固定模式
复用性	跨组件复用有状态逻辑	复用无状态工具逻辑

---

总结

• 使用组合式函数：
  当你需要封装有状态的、依赖 Vue 响应式系统或生命周期的逻辑时（如数据请求、事件监听）。

• 使用普通函数：
  当逻辑是纯计算、无状态且不依赖 Vue 特性时（如工具函数、数据处理）。

组合式函数是 Vue3 Composition API 的核心设计，解决了 Options API 中逻辑复用的痛点（如 Mixins 的命名冲突），同时提供了更灵活的代码组织方式。