Vue 3 中的 setup() 函数与 Options API 有何本质区别？为什么 Composition API 更适合逻辑复用？

Vue 3 中的 setup() 函数与 Options API 有何本质区别？为什么 Composition API 更适合逻辑复用？

回答：
Vue 3 中的 setup() 函数是 Composition API 的入口，它与 Options API 的本质区别在于组织代码的方式：Options API 按功能选项（如 data、methods、computed 等）组织逻辑，而 Composition API 通过 setup() 函数将相关逻辑按功能聚合在一起。

解析：
在 Options API 中，一个组件的逻辑被分散在 data、methods、watch、computed 等不同选项中。当组件复杂度增加时，相关逻辑可能被拆散到多个选项中，导致维护困难。例如，一个“用户信息”功能可能涉及 data 中的用户数据、methods 中的获取用户方法、watch 中的监听逻辑等，这些代码分散在不同位置。

而 Composition API 通过 setup() 函数允许开发者将相关逻辑封装在一个函数（通常称为“组合函数”，如 useUser）中，实现高内聚。例如：

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

export function useUser() {
  const user = ref(null)
  
  const fetchUser = async () => {
    user.value = await api.getUser()
  }

  onMounted(fetchUser)

  return { user, fetchUser }
}

在组件中使用：

setup() {
  const { user, fetchUser } = useUser()
  return { user, fetchUser }
}

这种方式不仅提高了代码的可读性和可维护性，还极大增强了逻辑复用能力——多个组件可以复用同一个 useUser 组合函数，而无需依赖 mixin（避免命名冲突和来源不清晰的问题）。因此，Composition API 更适合构建复杂、可维护和可复用的前端应用。