vue3 中的两种API--选项 API 和 组合 API区别

最新推荐文章于 2025-10-14 15:33:32 发布
转载 最新推荐文章于 2025-10-14 15:33:32 发布 · 9.4k 阅读 · 25 ·
CC 4.0 BY-SA版权
原文链接：https://zhuanlan.zhihu.com/p/491564920
文章标签：

#vue

本文介绍了如何使用Vue CLI和Vite快速创建Vue 3项目，并详细比较了选项API与组合API的优缺点，强调了两者在不同场景的应用选择。

**
这是原作者的文章

搭建 vue3 开发环境：

**
①： 使用 vue-cli搭建

和 vue2 搭建没有太大差异，选择自定义配置时，只用在选择版本时选择 3.x 版本即可。

安装完毕可以检查 package.json 文件，vue的版本号（我目前创建完成后版本为 3.2.0）

②： 使用 vite 创建 vue项目

直接在终端中输入 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称

vue中的两种API–选项 API 和 组合 API

① 选项 API

什么是选项 API : 在 vue2.x 项目中使用的就是 选项API 写法

代码风格：date选项写数据，methods选项写函数、、、、，一个功能逻辑的代码分散

优点：易于学习和使用，写代码的位置已经约定好了

缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。

虽然提供了 mixins 用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护

② 组合 API

什么是组合 API : 在 vue3 中使用的就是 组合API 写法

代码风格：一个功能逻辑的代码组织在一起（包括数据，函数、、、）

优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护

缺点：需要有良好的代码组织能力和拆分逻辑能力 （在 vue3 中也可以支持 vue2 选项API 写法）

③ 选项式和组合式 API 的关系

  1. 组合式 API 的目的是增强，不是取代选项式 API , vue3 对两种 API 都支持

  2. 简单的场景使用选项式 API 更加简单方便

  3. 需要强烈支持 TS 的项目首选组合式 API

  4. 需要大量逻辑复用的场景首选组合式 API

LiM .YOon A
关注
Vue3 - 什么是组合式 API？与选项式 API 有什么不同？（先从 Vue2 角度进行讲解，然后过渡到 Vue3）详细教程
🏆 前端领域优质创作者
11-09 3263
vue官方文档，vue3官方文档，vue组合式api官方文档，vue3 中的两种API，vue3学习(2)选项式API和组合式API的区别，Vue3组合式API，Vue3 组合式 API Vue3 组合式 API(Composition API)，[Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处，什么是Vue3的组合式API?，vue3和vue2在API使用上有哪些差异，Vue3中的组合式 API示例详解，Vue3 组合式 API | 菜鸟教程，我一定要用Vue3的setup吗? | 组合式
Vue3使用Pinia-store选项式api和组合式api两种使用方式-快速入门demo
JackieDYH的博客
07-24 1440
Vue3使用Pinia-store选项式api和组合式api两种使用方式-快速入门demo
选项式和组合式有什么区别
weixin_50756332的博客
02-19 1086
Vue2 主要使用选项式 API，而 Vue3 引入了组合式 API，提供了更灵活的逻辑组织和复用方式。是 Vue3 的新特性，适合复杂场景，提供更好的逻辑复用和 TypeScript 支持。两者可以共存，Vue3 支持在同一个项目中混合使用选项式 API 和组合式 API。通过自定义 Hook，可以将逻辑提取到单独的函数中，方便复用。相关逻辑可以组织在一起，而不是分散在多个选项中，代码更易维护。：对于大型组件或需要逻辑复用的场景，组合式 API 更灵活。：相关逻辑可以组织在一起，而不是分散在多个选项中。
组合式API vs 选项式API，谁才是Vue3开发的终极选择？
BreakVein的博客
10-14 452
掌握vue3组合式api核心优势，轻松提升开发效率。对比选项式API，详解响应式系统、逻辑复用与代码组织方法，适用于复杂组件与中大型项目。谁更适合你？点击了解终极选择方案，值得收藏。
vue3.0之什么是组合式和选项式，什么是hook，vue3.0和vue2.0的响应式数据原理和区别,Vue2 常见的缺陷，Vue3 的新特性，
chuxialia的博客
09-22 4263
vue3.0之什么是组合式和选项式，什么是hook，vue3.0和vue2.0的响应式数据原理和区别,Vue2 常见的缺陷，Vue3 的新特性，
Vue3中的组合式API与选项式API：深入理解与比较
热门推荐
nbsaas-boot基于Request-Response的企业级快速开发框架
04-12 1万+
同时，随着Vue3的普及和推广，越来越多的开发者和企业将加入到Vue.js的生态系统中来，共同推动前端技术的发展和进步。这种API的设计方式是基于对象的，我们将一个Vue实例的各个部分拆分成不同的选项，如data、methods、computed、watch等，并在创建Vue实例时将它们作为选项传入。组合式API是一种基于函数的API，它允许开发者将组件的逻辑代码拆分成多个独立的函数，每个函数负责处理特定的功能或逻辑。相比之下，组合式API将组件的逻辑拆分成多个独立的函数，每个函数负责特定的功能或逻辑。
组合式（composition）API和选项式（options）API的区别？
laowang357的博客
03-13 3684
组合式（composition）API和选项式（options）API是Vue.js中两种不同的组件API风格。
VUE3 学习笔记（14）：VUE3 组合式API与传统选项式API用法
众纳百川的博客
06-05 752
VUE3相较VUE2的亮点很多，作为后端开发置于前端最大的感受就是组合式API（之前采用的是选项式API）；它使得整体更简洁易用,但值得提醒的是官方并未强制要求二选一，尽管如此在同一个项目中还是不要出现两种写法。
Vue3-08 组合式Api和选项式Api
qq_36360308的博客
07-01 568
在Vue中，组合式 API（Composition API）和选项式 API（Options API）是两种不同的编程风格和组织代码的方式。
Vue2和Vue3的区别&&Vue3的组合式API
qq_24428851的博客
07-03 600
(3)、操作数组后同时要具有响应式，必须要使用下面的方法：push（在数组的最后面添加数据）、pop（删除数组的最后一个数据）、unshift(在数组前面添加内容)、shift(删除数组最前面的数据)、sort(排序)、reverse（反转）、splice（截取删除）（2）、Vue3：组合式API的作用是将原来分散开来定义的数据、方法、计算属性、监听器、组合起来定义一个完整的业务。（2）、Vue3:是一个对象。（1）、Vue2:data选项可以是一个对象，也可以是一个方法（由方法返回一个对象）。
选项式 API 和组合式 API的区别
weixin_39964419的博客
01-17 1万+
选项式 API 和组合式 API的区别
组合式 API和选项式 API的区别
dzhnb的博客
11-19 1639
组合式 API 和选项式 API 各有优缺点，组合式 API 的主要优势在于更强的逻辑复用和组合能力、更好的类型推导和类型安全、更清晰的逻辑隔离、灵活的逻辑组合和嵌套，以及更方便的测试。选项式 API 在 Vue 2 中广泛使用，仍然是一个强大和有效的选择，但对于复杂逻辑的管理和复用，组合式 API 提供了更现代化的解决方案。
vue中选项式 API（Options API） 和 组合式 API（Composition API）区别
涂涂
10-23 2295
特性选项式 API组合式 API语法风格通过选项（datamethodscomputed等）通过setup函数组织逻辑，灵活自由代码组织逻辑分散到不同选项块，直观但分散逻辑可以集中，适合复杂应用逻辑复用通过mixins实现，但存在命名冲突问题通过组合函数复用逻辑，灵活且清晰TypeScript 支持支持但较为局限原生支持更好，类型推断更精确生命周期钩子使用选项mountedcreated等在setup中使用onMounted等 API学习曲线易于上手，适合初学者。
组合式api与选项式api的区别
liuxin1008的博客
01-03 960
组合式api与选项式api的区别
选项式API和组合式API
A57796的博客
06-21 1709
Vue3支持选项式API和组合式API。其中，选项式API是从Vue2开始使用的一一种写法，而Vue3新增了组合式API的写法。接下来对选项式API和组合式API分别进行介绍。
vue3 选项式 API 和组合式 API 区别
weixin_43867229的博客
05-08 1278
vue组合式和选项式的区别
Vue3选项式API和组合式API详解
qq_41765777的博客
12-22 5509
对于熟悉使用Vue2的小伙伴来说，我们在Vue2项目中使用的就是组合式API。整个组件像是被一项一项配置出来的。data(){return {count:10,price:9.9,},computed:{sun:()=>{},watch:{/*这里有1000行代码………*/methods:{console.log("总价已更新为：",this.sum);
Vue3组合式API与选项式API的核心区别与适用场景
记录
03-29 2001
组合式API代表了Vue框架的未来发展方向，它解决了选项式API在复杂应用中的诸多限制，提供了更强大的代码组织能力和更灵活的复用模式。虽然学习曲线略高，但带来的长期收益显著。大型企业级应用需要良好TypeScript支持的项目高复用性要求的组件库性能敏感型应用选项式API仍会长期存在，适合简单场景和迁移过渡期。开发者应根据项目需求和团队技能选择合适的API风格，也可以在一个项目中混合使用两种风格。
Vue 组合式 API 与 选项式 API 全面对比教程
nineeea的博客
06-15 2059
Vue提供选项式API（Options API）和组合式API（Composition API）两种组件开发方式
Vue 3 选项式 API 和组合式 API 有什么区别？
最新发布
10-29
Vue 3 中的选项式 API（Options API）和组合式 API（Composition API）是两种构建组件的方式，它们本质上是不同的组织逻辑和编写代码的风格，以下是它们的区别： ### 代码组织方式 - **选项式 API**：通过不同的选项（如 `data`、`methods`、`computed`、`watch` 等）来组织代码，每个选项有其特定的功能和用途。这种方式将不同类型的逻辑分离，对于小型组件和初学者来说，代码结构清晰，易于理解。例如： ```vue <template> <button @click="add">Count is: {{ count }}</button> </template> <script> export default { data() { return { count: 0 }; }, methods: { add() { this.count++; } } }; </script> ``` - **组合式 API**：基于函数的组合来组织代码，将相关的逻辑封装在一个或多个函数中。这种方式可以更灵活地组织代码，特别是在处理复杂逻辑时，能将相关逻辑放在一起，提高代码的可读性和可维护性。通常与 `<script setup>` 搭配使用，示例如下： ```vue <template> <button @click="add">Count is: {{ count }}</button> </template> <script setup> import { ref } from &#39;vue&#39;; // 响应式状态 const count = ref(0); // 用来修改状态、触发更新的函数 function add() { count.value++; } </script> ``` ### 逻辑复用性 - **选项式 API**：逻辑复用主要通过 mixins 实现，但 mixins 存在一些问题，如命名冲突、不清晰的数据来源等，导致代码的可维护性降低。 - **组合式 API**：可以将相关逻辑封装成一个函数（通常称为组合函数），在多个组件中复用，避免了 mixins 的问题，提高了逻辑复用的灵活性和可维护性。例如，可以创建一个组合函数来处理计数器逻辑： ```javascript import { ref } from &#39;vue&#39;; export function useCounter() { const count = ref(0); function add() { count.value++; } return { count, add }; } ``` 然后在组件中使用： ```vue <template> <button @click="add">Count is: {{ count }}</button> </template> <script setup> import { useCounter } from &#39;./useCounter&#39;; const { count, add } = useCounter(); </script> ``` ### 类型支持 - **选项式 API**：对 TypeScript 的支持相对较弱，需要额外的配置和类型声明，在处理复杂类型时会比较繁琐。 - **组合式 API**：由于是基于函数的方式，天然对 TypeScript 有更好的支持，能更方便地进行类型推导和类型声明，适合在需要强烈支持 TS 的项目中使用[^4]。 ### 适用场景 - **选项式 API**：适合简单的场景，代码量较少、逻辑简单的组件，对于初学者来说更容易上手。 - **组合式 API**：适合需要大量逻辑复用的场景、复杂的业务逻辑以及大型项目，能提高代码的可维护性和可扩展性。同时，组合式 API 的目的是增强，而不是取代选项式 API [^4]。 ### 响应式原理 - **选项式 API**：响应式系统是隐式的，通过 `data` 选项定义的数据会自动转换为响应式数据，开发者不需要手动处理响应式。 - **组合式 API**：响应式系统是显式的，需要使用 `ref`、`reactive` 等函数来创建响应式数据，开发者对响应式的控制更加灵活。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值