Vue3-Composition(组合式api)和options(选项式)区别

最新推荐文章于 2024-08-22 16:08:46 发布

草潮张学友

最新推荐文章于 2024-08-22 16:08:46 发布

阅读量2k

点赞数

分类专栏： Vue3 文章标签： 1024程序员节

本文链接： https://blog.csdn.net/qq_38492231/article/details/127390689

版权

Vue3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue2中的Options 组合式API在一个vue文件中，包含有methods、computed、watch、data中定义属性和方法，共同处理页面逻辑。当页面逻辑复杂时，显得页面过于臃肿，即便将页面中的公用方法进行抽象封装，methods中的方法，仍然有几十个，经常需要搜索才能定位到相应的方法体，增加了代码的维护时间。
Vue3中舍弃了这种 Options API，而换用 Composition API。在vue3 Composition API中，组件根据逻辑功能来组织，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API。我们用下面两张图来做简单区分

Options选项式Api
在这里插入图片描述
Compsition Api

在逻辑组织和逻辑复用方面，Composition API是优于Options API
因为Composition API几乎是函数，会有更好的类型推断。
Composition API对 tree-shaking 友好，代码也更容易压缩
Composition API中见不到this的使用，减少了this指向不明的情况
如果是小型组件，可以继续使用Options API，也是十分友好的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

草潮张学友

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - 什么是组合式 API？与选项式 API 有什么不同？（先从 Vue2 角度进行讲解，然后过渡到 Vue3）详细教程

王佳斌

11-09

2672

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的选项式和组合式的区别

Pzj15817073966的博客

04-30

409

【代码】Vue3的选项式和组合式的区别。

参与评论您还未登录，请先登录后发表或查看评论

vue3中组合式与选项式的区别

项目git同名HuYaochao，未入职

08-22

418

在 Vue 3 中，有两种主要的组件定义方式：选项式 API 和组合式 API。它们在编写方式和逻辑组织上有所不同，各有优缺点。下面详细解释它们的区别。

Vue3 组合式 选项式区别简单理解

m0_69576888的博客

11-02

553

其实没那么麻烦，简单来说组合式的好处就是让 “数据” 和 “逻辑” 可以放在一起，方便维护，提高代码清晰度，不过实在不喜欢组合式的，Vue3并没有废弃选项式，好了，看代码。DOM绑定基本没变说下 script 里的一些基本内容和 script标签的区别。

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

qq_45716607的博客

04-16

9232

** 这是原作者的文章搭建 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 ① 选项

Vue3中的组合式API与选项式API：深入理解与比较

nbsaas-boot基于Request-Response的企业级快速开发框架

04-12

6626

同时，随着Vue3的普及和推广，越来越多的开发者和企业将加入到Vue.js的生态系统中来，共同推动前端技术的发展和进步。这种API的设计方式是基于对象的，我们将一个Vue实例的各个部分拆分成不同的选项，如data、methods、computed、watch等，并在创建Vue实例时将它们作为选项传入。组合式API是一种基于函数的API，它允许开发者将组件的逻辑代码拆分成多个独立的函数，每个函数负责处理特定的功能或逻辑。相比之下，组合式API将组件的逻辑拆分成多个独立的函数，每个函数负责特定的功能或逻辑。

vue3-composition-API

03-31

在Vue2中，我们主要使用Options API来组织组件逻辑，而在Vue3中，Composition API提供了更灵活的组合功能，将状态管理、副作用、计算属性等功能解耦出来，使其可以在不同组件之间共享。 Vue3 Composition API 的...

11_Vue3-Composition-API（二）.pptx

01-25

Vue 3 Composition API 组合式 API 详解 Vue 3 Composition API 是 Vue 3 中的一种新的编程模型，它提供了一种更加灵活和强大的一种方式来构建 Vue 应用程序。Composition API 是对 Options API 的一种补充和改进...

awesome-vue-composition-api：:rocket:与vue composition api相关的令人敬畏的事物的精选列表

01-30

在Vue 2中，我们主要使用选项API（options API），如data、methods、computed和watch等。然而，随着项目规模的增长，选项API可能会导致代码组织困难，难以维护。Vue Composition API则提供了更模块化和可重用的代码...

Composition-API:Vue Js从Options API迁移到Composition API

04-07

在Vue 2.x版本中，主要使用的是Options API，而在Vue 3.x中，引入了全新的Composition API。本篇文章将深入探讨从Options API向Composition API迁移的相关知识点。 **一、Options API简介** Options API是Vue 2.x的...

vue2中Options API 和 vue3中Composition API 的对比

qq_27009517的博客

12-08

669

回顾一下：在vue2中如何组织代码的，我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API 缺点：一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含20多个方法，你往往分不清哪个方法对应着哪个功能 vue3中的Composition API就是用来解决这个问题的在vue3 Composition API .

Vue3自学笔记（一）：选项式与组合式API编程风格对比总结

weixin_42565421的博客

03-03

6811

组合式api的组件编辑方式是Vue2.7以及Vue3以上的版本提出的全新概念，是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。// 子组件.vue 组合式api案例 < script > import {// 响应式状态 const count = ref(0);// 更改状态、触发更新的函数 function increment() {

Composition API 和 Options API

我的博客简介

02-23

738

这样可以提高代码的可读性和可维护性，同时更好地重用和组合代码。更清晰的代码关系：Options API中，各个选项（data、methods、computed等）之间的关系不够明确，可能需要在代码中查找才能看出它们之间的联系。而Composition API采用函数式的方式组织代码，代码的关系更加直观和清晰，便于开发者理解和查找。需要注意的是，虽然Composition API相对于Options API具有一些优势，但Options API在小型项目或对于初学者来说仍然可以是一个简洁和易于理解的选择。

Vue3: 选项式API和组合式API的优缺点

m0_46400453的博客

03-30

4439

来描述组件的行为和状态的。选项式API需要在Vue组件的选项对象中声明组件的属性和方法，如data、methods、computed、watch等，然后通过模板语法来渲染UI。来描述组件的行为和状态的。组合式API将组件的逻辑分解为可服用的函数，通过一些API来组合这些函数，从而创建组件。选项式API是vue2.x版本中默认使用的API风格，它是基。组合式API是vue3.x版本中新增的API风格，它是基于。Vue框架提供了两种不同的API风格来编写组件，分别是。

Vue3组合式API和选项式API的优缺点

行胜于言，行动胜于空想

07-13

1225

Vue 3 引入了全新的组合式 API（Composition API），与传统的选项式 API（Options API）相比，带来了许多改进和新特性。本文将探讨 Vue 3 组合式 API 和选项式 API 的区别，以及为什么组合式 API 是一个强大的工具，可用于更好地组织和复用 Vue 组件的逻辑。代码组织：选项式 API 将组件的逻辑代码散落在不同的选项中，随着组件变得复杂，这可能导致代码难以阅读和维护。组合式 API 解决了这个问题，通过将逻辑封装为自定义函数，可以更好地复用逻辑代码。

Composition Api 和 Options Api的区别在哪？哪个好？为什么我选择用vue3的组合式api，而不是选项式api？

wz9608的博客

03-11

1947

看看官方文档的说明组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式 API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如和，使我们可以在组件各个生命周期阶段添加逻辑。依赖注入：例如provide()和inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。再看看官方给出的一张图以及说明。

Vue中的选项式 API 和组合式 API，两者有什么区别

舒一笑的博客

01-03

2143

总结来说，选项式 API 通过一个明确的、定义好的选项对象提供了一种简洁直观的方式来组织组件代码，非常适合快速上手和小型项目。而组合式 API 提供了更高的灵活性和复用性，适合构建大型应用和复杂组件，特别是在使用TypeScript时。这两种API并不是相互排斥的，而是可以根据项目的具体需求和开发者的偏好灵活选择和结合使用。

vue3 选项式 API 和组合式 API 区别

weixin_43867229的博客

05-08

1055

vue组合式和选项式的区别

options api 和composition api的区别

一杯梅子酱的博客

06-05

748

对于小型项目或简单场景，Options API 可能是一个很好的选择。然而，对于大型项目或需要高度复用和关注点分离的场景，Composition API 可能更具优势。在选择使用哪种 API 时，应根据项目的实际需求和团队的偏好来做出决策。，但它们之间确实存在一些显著的区别。

Vue3选项式API和组合式API的概念