请解释 Vue 3 中 Composition API 的定义及其核心作用,并简述它与 Vue 2 中 Options API 的主要区别。
考察说明
考查对 Vue 3 核心特性 Composition API 的基本概念和优势的理解。
回答思路
- 【回答框架 1】Composition API 是 Vue 3 引入的一种新的组件逻辑组织方式,它允许开发者通过 setup 函数或 <script setup> 语法将组件的相关逻辑按功能组织在一起,而非像 Options API 那样强制按数据、方法、计算属性等选项分组。
- 【回答框架 2】核心作用包括:更好的逻辑复用(通过组合式函数)、更清晰的代码组织(尤其对于复杂组件)、更完善的类型推断支持,以及更灵活的代码结构。
- 【回答框架 3】与 Options API 的主要区别在于代码组织方式:Options API 将同一功能的相关代码分散在 data、methods、computed 等选项中,而 Composition API 允许将同一功能的响应式状态、计算属性和函数集中定义,从而提升可维护性。
- 【关键点 1】Composition API 通过 setup 函数或 <script setup> 实现,是 Vue 3 的重要特性。
- 【关键点 2】它支持逻辑复用,避免 mixin 的命名冲突和来源不清问题。
- 【关键点 3】类型推断更友好,特别是在 TypeScript 环境下。
- 【关键点 4】Vue 3 仍支持 Options API,两者可以混用,但推荐新代码使用 Composition API。
- 【易错点 1】不适用范围:这是一个 Vue 3 知识性问题,无特定技术风险。