【Vue3—Composition AP】相对于【Vue2—Options API 】存在的优势

最新推荐文章于 2023-08-01 18:30:00 发布
最新推荐文章于 2023-08-01 18:30:00 发布
阅读量468 收藏 1
点赞数 2
分类专栏： # Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45890970/article/details/123232735
版权

【Vue3 Composition AP】vs【Vue2 Options API 】

Options API 存在的问题

在传统OptionsAPI中，数据、方法等分别在data，methods中。随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，代码可复用性也不高。

在这里插入图片描述

Composition API 的优势

通过配合hook函数，我们可以更加优雅的组织我们的代码、函数。让相关功能的代码更加有序的组织在一起。
在这里插入图片描述

焦妮敲代码
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue Composition API重点
RedlOvE
10-09 2480
Composition API RFC重点汇总 1.1 小例子 <template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> </template> <script> ...
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新特性之在Composition API中使用CSS Modules
10-15
主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3.0 Composition API的优势
qq_46582421的博客
01-15 301
我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。 如图所示：
对比Vue2中Options API 和 Vue3中Composition API
青年码农
01-04 425
1 Options APIOptions API 可以翻译为选项API，字面意思可供使用者挑拣的分类条目，就是框架定义好选项，我们可以把我们的功能写在选项里，如props 里面设置接收参数、data 里面设置变量、computed 里面设置计算属性、watch 里面设置监听属性、methods 里面设置事件方法你会发现 Options APi 都约定了我们该在哪个位置做什...
vue3 的composition Api 优势
MCCLS的博客
09-15 345
之前vue2的写的代码会分散 vue3中功能的代码就可以放在一起去实现
【Vue3】第八部分 Composition API 的优势
Trees__的博客
03-19 535
【Vue3】第八部分 Composition API 的优势 文章目录【Vue3】第八部分 Composition API 的优势8. Composition API 的优势8.1 Options API 存在的问题8.2 Composition API 的优势 8. Composition API 的优势 8.1 Options API 存在的问题 使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。 8.2 Compos
浅谈Vue3 Composition API如何替换Vue Mixins
10-15
Vue3 Composition API 替换 Vue Mixins 的原因与方法 Vue 2 中的 Mixins 是一种常见的代码复用机制，允许开发者将通用的功能抽取到一个单独的模块中，然后在多个组件中引用。然而，随着时间的推移，人们发现 Mixins...
vue3中Options API(学习)代码
最新发布
11-05
总之，Vue3 保留了 Options API，使得现有 Vue2 项目能平滑过渡，但鼓励开发者使用Composition API，以充分利用 Vue3 的新特性，提高代码的可读性和可维护性。通过学习 Vue3 的 Options API，开发者可以更好地理解 ...
详解Vue3 Composition API中的提取和重用逻辑
10-15
首先，Vue2.x 的 Options API 将数据、方法和计算属性分散在不同的部分，导致一个组件的功能代码可能跨越多个区域，这在代码维护和调试时会带来困难。Vue3 引入的Composition API 提倡在一个 `setup` 函数中处理所有...
一文带你彻底了解Composition API
小白
03-24 592
如果你已经熟悉 Vue 2 中的 options API，那么你可以继续使用它，但如果你正在构建一个更大、更复杂的应用程序，或者你想要更好的组织代码，那么 Composition API 可能更适合你。在 Vue 2 中，我们通常需要将相关逻辑和数据分散在多个不同的选项中，而在 Composition API 中，我们可以将所有相关的逻辑和数据放在一个自定义组合函数中，使代码更加模块化和易于组织。由于逻辑和数据是分离的，我们可以更容易地测试我们的代码，而不需要担心组件实例的复杂性。
@vue/composition-api功能介绍
brizer的博客
08-01 2159
@vue/composition-api 是通过一个插件的方式,为 Vue2（2.7自带，2.6及以下可用） 提供类似 Vue3 composition API 的函数式编程能力。它的实现思路主要有:1、提供组合式函数,在函数内部追踪响应性依赖。2、将组合产生的响应式状态保存到组件实例上,并在渲染期间还原。3、重写组件的生命周期钩子,在钩子函数中恢复组合函数的上下文环境。通过 setup() 函数作为入口,在其执行期间运行各响应式 API 追踪依赖,形成响应式状态,然后保存到实例上;在生命周期钩子中变更执行
25.Vuex 结合 Composition API的使用
05-18 1358
Vuex结合CompositionAPI使用 Composition API中没有this.$store,可以使用useStore来替代 import { useStore } from 'vuex' export default { setup () { const store = useStore() } } Composition API中访问state和getters import { computed } from 'vue' import { useStore } fro
简明扼要聊聊 Vue3.0 的 Composition API 是啥东东！
Cool的博客
06-29 914
对于没太了解 Vue3.0 的同学，在看到 Composition API 时，除了看起来会有一个“高大上”的感觉，可能更多的是有点懵逼，心中不免泛起一堆疑惑，这到底是何方神圣？干了何等大事？承担了何种重任？ 下面我们就一起来简明扼要聊聊，用人人都听得懂的话来阐述 Vue3.0 Composition API。 What 首先，这两单词是啥意思？ Composition: 构成，组合方式 API：应用程序接口（Application Programming Interface），指一些预先定义的函数
@vue/composition-api 解析
开源世界
08-12 6343
前言 组合式 API 是 vue3 提出的一个新的开发方式，而在 vue2 中我们可以使用新的组合式 API 进行组件开发。本篇通过一个例子，来分析这个插件是如何提供功能。 关于该插件的安装、使用，可以直接阅读文档。 安装 我们从最开始安装分析，一探究竟。 vue.use 按照文档所提到的，我们必须通过 Vue.use() 进行安装： // vue.use 安装 import Vue from ‘vue’ import VueCompositionAPI from ‘@vue/composition-api
vue3.0正式版-2.x和3.x的对比
口袋的天空的博客
11-29 2378
vue3.0正式版 一.vue3.0的亮点 性能比vue2.x快1.2~2倍 ①diff方法优化 ②静态提升 ③事件侦听器缓存 ④ssr渲染 支持按需编译，按需导入，体积比vue2.x更小 支持组合API，类似React Hooks 更好的支持ts，因为他是ts写的 暴露了自定义渲染的API 提供过了更先进的组件 二.vue3.0是如何变快的 1. diff方法优化 vue2.0中的虚拟dom是进行全量的对比 vue3.0新增了静态标记(PatchFlag)，在于上次虚拟节点进
vue/composition-api 的使用
Luckyzhoufangbing的博客
09-17 7056
Vue2 Composition API npm 包 学习
Vue：对比于 Options API，为什么 Composition API 很香？
终生学习，终生成长
07-27 1273
先说结论，对比于 Options API，Composition API 的优点主要有以下两点： 1.能够将代码按照功能进行封装，降低开发成本与后期维护成本，且让setup中的逻辑更清晰易读。 2.能够方便的实现代码逻辑复用。 通过动图对比 Options API 与 Composition API。 通过代码对比 Options API 与 Composition API。.........
Vue3 composition API(组合API)详解与代码
weixin_44813417的博客
10-10 1326
本篇文章基于该视频: 尚硅谷教学Vue2与Vue3 Vue3详解setup函数初始注意点响应式ref函数(基本数据类型)reactive函数(引用数据类型)响应式原理Vue2.0X响应式原理Vue3.0X响应式原理computedwatch setup函数 初始 新的配置项 值为一个函数 组件中的所有数据、方法等，均要配置在setup中 setup函数有两个返回值： ①若返回一个对象，则对象中的属性、方法，在模板中均可使用。（重点） ②若返回一个渲染函数，则可以自定义渲染内容。（了解） ⚠ v.
vue3的composition API和vue2的options api
05-05
Vue3的Composition API是一种新的API风格，它提供了一种更灵活的方式来组合组件逻辑。...总的来说，Vue3的Composition API是更加现代化和灵活的API，而Vue2的Options API则更适合于小型应用或者初学者。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值