Composition API（组合式 API / <script setup>）做对比

组合式 API（Vue3 主流）

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
import {ref, computed, watch, onMounted} from 'vue'

// count相关的所有逻辑全部写在一起，聚合到一块
const count = ref(0)
const add = () => count.value++
const doubleCount = computed(()=> count.value *2)
watch(count,(newVal)=>{
  console.log("count变了",newVal)
})
onMounted(()=>{
  console.log("组件挂载完成")
})
</script>

两者核心差异

表格

举个通俗例子理解

需求：做一个计数器，包含变量、加方法、监听、计算属性。

• Options API：把所有变量放 A 抽屉，所有函数放 B 抽屉，监听放 C 抽屉。想用一套计数器逻辑，要分别去 A/B/C 抽屉拿代码。
• Composition API：把计数器整套逻辑打包放在一起，需要直接复制这一整块。

现实工作场景

1. 看老 Vue2 项目：全是 Options API，必须能读懂
2. Vue3 新项目：优先写<script setup>组合式 API；也可以写 Options API，但不推荐。
3. Vue3 不是抛弃 Options API，只是提供更好的新写法。

补充：Vue3 里你可以同一个项目，一部分组件写 Options，一部分写 script setup，两种写法可以共存。