Vue 3 中的 Composition API 与 Options API 有何本质区别，各自适用于什么场景？

Vue 3 中的 Composition API 与 Options API 有何本质区别，各自适用于什么场景？

回答：
Vue 3 引入了 Composition API（组合式 API），作为对 Options API（选项式 API）的补充。两者的核心区别在于组织逻辑的方式：

• Options API：将组件逻辑按选项（如 data、methods、computed、watch 等）进行划分。适合小型组件或初学者，代码结构清晰但逻辑复用困难。
• Composition API：通过 setup() 函数将相关逻辑（如状态、计算属性、副作用等）按功能组织在一起，使用 ref、reactive、computed、watch 等函数进行组合。适合复杂组件或需要逻辑复用的场景，便于提取自定义组合函数（composables）。

解析：
在 Options API 中，一个功能（如用户信息获取与展示）的逻辑可能分散在 data、methods、watch 等多个选项中，随着组件变大，维护成本上升。而 Composition API 允许将同一功能的所有逻辑集中编写，例如：

// composables/useUser.js
import { ref, onMounted } from 'vue'

export function useUser(id) {
  const user = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    user.value = await fetchUser(id)
    loading.value = false
  })

  return { user, loading }
}

在组件中使用：

import { useUser } from './composables/useUser'

export default {
  setup() {
    const { user, loading } = useUser(123)
    return { user, loading }
  }
}

这种方式极大提升了逻辑复用性和代码可维护性。因此：

• Options API 适合简单、逻辑单一的组件；
• Composition API 更适合中大型项目、逻辑复杂或需要跨组件复用的场景。

Vue 3 同时支持两种 API，开发者可根据项目需求灵活选择。