Composition API是 Vue 3 中一种按逻辑功能组织代码的写法提供了一组函数式 API如ref、reactive、computed、watch等允许开发者根据逻辑功能组织代码而不是根据选项类型data、methods、computed来组织。简单说就是把相关的代码放在一起而不是按照 data、methods、computed 等类型强制分开例子在vue2中script export default { data() { return { count: 0, double: 0 } }, methods: { increment() { this.count this.double this.count * 2 } } } /script数据在data里方法在methods里虽然逻辑相关但被分开了。在vue3中script setup import { ref, computed } from vue // 所有相关代码都放在一起 const count ref(0) const double computed(() count.value * 2) function increment() { count.value } /script template p{{ count }} 的两倍是 {{ double }}/p button clickincrement增加/button /template数据、计算属性、方法都组合在一起代码更紧凑。总结选项式 按类型分抽屉所有数据放一格所有方法放另一格组合式 按功能打包做菜的功能食材步骤锅具放一个盒子里