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

最新推荐文章于 2024-04-30 10:46:24 发布
最新推荐文章于 2024-04-30 10:46:24 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： Vue3 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38492231/article/details/127390689
版权

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，也是十分友好的

草潮张学友
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3-composition-admin:v基于vue3的管理端模板（Vue3 TS Vuex4 element-plus vue-i18n-next composition-api）vue3-admin vue3-ts-admin
03-20
vue3-composition-admin是一个管理端模板解决方案，它是基于vue3，ts和element-plus，项目都是以composition api风格编写的。 简介 项目的基础版本出自自于源于花裤衩大佬的vue-element-admin。 版本： vue2 + js...
vue-composition-test-utils:适用于Vue 2和3的简单vue合成api单元测试实用程序
04-27
简单的Vue Composition API测试实用程序 安装 // use yarn yarn add vue-composition-test-utils -D // use npm npm install vue-composition-test-utils -D 演示版 代码 import { ref } from 'vue' export ...
Vue3: 选项式API和组合式API的优缺点
m0_46400453的博客
03-30 4076
来描述组件的行为和状态的。选项式API需要在Vue组件的选项对象中声明组件的属性和方法，如data、methods、computed、watch等，然后通过模板语法来渲染UI。来描述组件的行为和状态的。组合式API将组件的逻辑分解为可服用的函数，通过一些API来组合这些函数，从而创建组件。选项式API是vue2.x版本中默认使用的API风格，它是基。组合式API是vue3.x版本中新增的API风格，它是基于。Vue框架提供了两种不同的API风格来编写组件，分别是。
vue3 中的两种API--选项 API 和 组合 API区别
qq_45716607的博客
04-16 9109
** 这是原作者的文章 搭建 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的选项式和组合式的区别
最新发布
Pzj15817073966的博客
04-30 292
【代码】Vue3的选项式和组合式的区别。
Vue3自学笔记（一）：选项式与组合式API编程风格对比总结
weixin_42565421的博客
03-03 5810
组合式api的组件编辑方式是Vue2.7以及Vue3以上的版本提出的全新概念，是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。// 子组件.vue 组合式api案例 < script > import {// 响应式状态 const count = ref(0);// 更改状态、触发更新的函数 function increment() {
Vue3组合式API和选项式API的优缺点
行胜于言，行动胜于空想
07-13 937
Vue 3 引入了全新的组合式 API（Composition API），与传统的选项式 API（Options API）相比，带来了许多改进和新特性。本文将探讨 Vue 3 组合式 API 和选项式 API 的区别，以及为什么组合式 API 是一个强大的工具，可用于更好地组织和复用 Vue 组件的逻辑。代码组织： 选项式 API 将组件的逻辑代码散落在不同的选项中，随着组件变得复杂，这可能导致代码难以阅读和维护。组合式 API 解决了这个问题，通过将逻辑封装为自定义函数，可以更好地复用逻辑代码。
Vue3 组合式 选项式 区别简单理解
m0_69576888的博客
11-02 496
其实没那么麻烦，简单来说组合式的好处就是让 “数据” 和 “逻辑” 可以放在一起，方便维护，提高代码清晰度，不过实在不喜欢组合式的，Vue3并没有废弃选项式，好了，看代码。DOM绑定基本没变 说下 script 里的一些基本内容 和 script标签的 区别。
vue3-composition-admin：基于vue3的管理端模板
02-05
vue3-composition-admin是一个管理端模板解决方案，它是基于vue3，ts和element-plus，项目都是以composition api风格编写的。 简介 项目的基础版本出自于源于花裤衩大佬的vue-element-admin。 版本： vue2 + js版本...
todomvc-vue-composition-api:使用Vue 3 Composition Api和Vuex构建的TodoMVC
05-09
使用Vue 3 Composition Api和Vuex构建的TodoMVC 以结构化和可测试的方式使用Vue 3 Composition Api和Vuex构建的著名TodoMVC。 涵盖的概念和工具 用法 安装依赖项后，以下NPM脚本将变为可用： start ：以开发模式...
todomvc-vue-composition-api：使用Vue 3 Composition Api和Vuex构建的TodoMVC
02-06
使用Vue 3 Composition Api和Vuex构建的TodoMVC 以结构化和可测试的方式使用Vue 3 Composition Api和Vuex构建的著名TodoMVC。涵盖的概念和工具用法安装依赖项后，以下NPM脚本可用： start ：以开发模式在上启动应用...
Composition Api 和 Options Api的区别在哪？哪个好？为什么我选择用vue3的组合式api，而不是选项式api？
wz9608的博客
03-11 1806
看看官方文档的说明组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式 API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如和，使我们可以在组件各个生命周期阶段添加逻辑。依赖注入：例如provide()和inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。再看看官方给出的一张图以及说明。
Vue中的选项式 API 和组合式 API，两者有什么区别
舒一笑的博客
01-03 1723
总结来说，选项式 API 通过一个明确的、定义好的选项对象提供了一种简洁直观的方式来组织组件代码，非常适合快速上手和小型项目。而组合式 API 提供了更高的灵活性和复用性，适合构建大型应用和复杂组件，特别是在使用TypeScript时。这两种API并不是相互排斥的，而是可以根据项目的具体需求和开发者的偏好灵活选择和结合使用。
vue3 选项式 API 和组合式 API 区别
weixin_43867229的博客
05-08 947
vue组合式和选项式的区别
Vue中的选项式API(Options API)与函数式编程(Composition API)方式
qq_37704442的博客
02-13 196
Vue中的选项式API(Options API)与函数式编程(Composition API)方式
vue3的选项模式 和组合模式
weixin_32824897的博客
06-21 1138
通过将组件逻辑拆分为独立的函数或 Hooks，再通过这些函数来描述组件的数据、计算属性、方法、生命周期等内容。组合式使用的是函数式编程的风格，将组件拆分为可复用的逻辑单元，易于维护和复用。在使用选项式编写组件时，一个组件的所有选项都需要编写在同一个对象中，很容易造成代码冗长、复杂的情况，同时也不利于组件的重用和测试。而组合式则可以更加灵活的组合不同的逻辑单元，实现组件的高内聚、低耦合。相比于传统的选项式 API，组合式 API 不需要在多个选项之间切换，降低了学习成本，也更加符合函数式编程的思想。
TypeScript编译文件和tsconfig.json配置
John是橘红的博客
07-28 1511
自动编译文件 编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。 示例： tsc xxx.ts -w 自动编译整个项目 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译 配置选项：
选项式API与组合式API的区别
weixin_43273592的博客
07-16 928
当使用Vue 3的组合式API时，相较于Vue 2的选项式API，可以更灵活地组织和复用代码逻辑，提高代码的可维护性和可测试性。组合式API还可以更好地解决Vue 2中存在的代码重复、逻辑分散等问题。
vue3组合式api的生命周期
03-29
Vue 3的组合式API是一种新的编程模式，它提供了一种更灵活和可组合的方式来编写Vue组件。相比于传统的Options API，组合式API更加直观和易于维护。 在组合式API中，没有像Options API中的生命周期钩子函数那样明确...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值