组合式 API 和选项式 API 差在哪？

选项式按选项种类拆开代码，组合式按功能把状态、计算和请求放在一起。组合式更好复用一段有状态的逻辑，也更适合 TypeScript 推断。小组件用选项式仍然清楚。

原理

vue

<script setup>
const count = ref(0)
const doubled = computed(() => count.value * 2)
function add() {
  count.value += 1
}
</script>

ref、computed、watch 在 setup 里调用，遵守和 React Hooks 类似的规则：写在顶层，不要写进条件。自定义函数以 use 开头，里面可以调用这些 API。每次调用 useXxx 都有自己的状态，不是单例，除非它去读写模块级变量。

选项式的 mixin 按选项合并，同名方法谁覆盖谁不直观，数据从哪个 mixin 来也不明显。组合函数把依赖写在参数里，返回值明确。

<script setup> 里的顶层绑定会暴露给模板，不用再 return。defineProps 和 defineEmits 是编译宏，不是运行时才存在的函数。

追问

组合函数和 React Hook 一样吗？

都是在设置阶段调用、不能放进条件。Vue 的响应式在读取时收集依赖，computed 会跟踪里面读到的 ref。React 的 useMemo 要自己写依赖数组。不要把闭包过期那套原样套到 Vue 上。

什么时候仍用选项式？

组件只有几行状态和方法，团队也更熟选项式。复杂页、要复用的请求和订阅，用组合式。

易错点

在事件回调里才调用 useXxx 或 computed。要写在 setup 的顶层。
组合函数把状态存在模块作用域，所有组件共享同一份，通常不是你要的。
既 return 又在 <script setup> 里重复声明，两套脚本叠在一起。

相关