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

最新推荐文章于 2023-08-01 18:30:00 发布
最新推荐文章于 2023-08-01 18:30:00 发布
阅读量470 收藏 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
    评论
专栏目录
Vue3新特性之在Composition API中使用CSS Modules
10-15
Vue3的Composition API引入了一项新特性，即在Vue实例中使用CSS Modules。CSS Modules是一种模块化和组合CSS的系统，旨在解决CSS命名冲突和管理问题。Vue3的`useCSSModule`函数允许开发者在使用Composition API时，...
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.0正式版-2.x和3.x的对比
口袋的天空的博客
11-29 2380
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)，在于上次虚拟节点进
简明扼要聊聊 Vue3.0 的 Composition API 是啥东东！
Cool的博客
06-29 917
对于没太了解 Vue3.0 的同学，在看到 Composition API 时，除了看起来会有一个“高大上”的感觉，可能更多的是有点懵逼，心中不免泛起一堆疑惑，这到底是何方神圣？干了何等大事？承担了何种重任？ 下面我们就一起来简明扼要聊聊，用人人都听得懂的话来阐述 Vue3.0 Composition API。 What 首先，这两单词是啥意思？ Composition: 构成，组合方式 API：应用程序接口（Application Programming Interface），指一些预先定义的函数
一文带你彻底了解Composition API
小白
03-24 605
如果你已经熟悉 Vue 2 中的 options API，那么你可以继续使用它，但如果你正在构建一个更大、更复杂的应用程序，或者你想要更好的组织代码，那么 Composition API 可能更适合你。在 Vue 2 中，我们通常需要将相关逻辑和数据分散在多个不同的选项中，而在 Composition API 中，我们可以将所有相关的逻辑和数据放在一个自定义组合函数中，使代码更加模块化和易于组织。由于逻辑和数据是分离的，我们可以更容易地测试我们的代码，而不需要担心组件实例的复杂性。
vue使用了那么久 vue2和vue3的区别你们知道吗
luaond的博客
05-09 210
Vue 3 是 Vue.js 框架的最新版本，相对于 Vue 2 来说，Vue 3 有很多新的特性和改进。
【vue3学习系列】Composition API，组合式setup()方法的学习
庞囧的博客
06-06 1926
这样写的好处我想是能够很快的理清大的逻辑关系，细节部分再去对应的函数中看。可能在写组件的时候，会觉得使用什么就要亲手从vue引入的写法很繁琐，但这样子设计就是为了能在打包的时候，不会去打包多余的东西（tree shaking）。shallow是浅的意思，所以就能知道shallowReactive是用于浅响应式处理，相比较于Reactive，传入一个对象，只会对第一层进行响应式处理，嵌套第二层开始都不具备响应式了。第一个参数时监听的对象，第二个参数是监听需要做的逻辑，第三个参数是监听的配置。
浅谈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` 函数中处理所有...
vue3.0 Composition-API
TheShuangY的博客
03-03 240
目录一、Composition-API基本用法二、Composition-API抽取三、Composition-API抽取优化四、Composition-API本质 一、Composition-API基本用法 <template> <div> <p>{{count}}</p> <button @click="myFn">按钮</button> </div> </template> &lt
@vue/composition-api功能介绍
brizer的博客
08-01 2330
@vue/composition-api 是通过一个插件的方式,为 Vue2（2.7自带，2.6及以下可用） 提供类似 Vue3 composition API 的函数式编程能力。它的实现思路主要有:1、提供组合式函数,在函数内部追踪响应性依赖。2、将组合产生的响应式状态保存到组件实例上,并在渲染期间还原。3、重写组件的生命周期钩子,在钩子函数中恢复组合函数的上下文环境。通过 setup() 函数作为入口,在其执行期间运行各响应式 API 追踪依赖,形成响应式状态,然后保存到实例上;在生命周期钩子中变更执行
25.Vuex 结合 Composition API的使用
05-18 1365
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
vue/composition-api 的使用
Luckyzhoufangbing的博客
09-17 7080
Vue2 Composition API npm 包 学习
Vue：对比于 Options API，为什么 Composition API 很香？
终生学习，终生成长
07-27 1284
先说结论，对比于 Options API，Composition API 的优点主要有以下两点： 1.能够将代码按照功能进行封装，降低开发成本与后期维护成本，且让setup中的逻辑更清晰易读。 2.能够方便的实现代码逻辑复用。 通过动图对比 Options API 与 Composition API。 通过代码对比 Options API 与 Composition API。.........
@vue/composition-api 解析
开源世界
08-12 6362
前言 组合式 API 是 vue3 提出的一个新的开发方式，而在 vue2 中我们可以使用新的组合式 API 进行组件开发。本篇通过一个例子，来分析这个插件是如何提供功能。 关于该插件的安装、使用，可以直接阅读文档。 安装 我们从最开始安装分析，一探究竟。 vue.use 按照文档所提到的，我们必须通过 Vue.use() 进行安装： // vue.use 安装 import Vue from ‘vue’ import VueCompositionAPI from ‘@vue/composition-api
vue2中Options API及vue3中Composition API 的区别对比
斌哥谈编程
11-07 669
一、代码组织区别 在vue2组织代码时，我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API。 缺点： 一个功能需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含20多个方法，你往往分不清哪个方法对应着哪个功能，这个是深有体会 在vue3 Composition API 中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有api会
【Vue3】第八部分 Composition API 的优势
Trees__的博客
03-19 537
【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.0 Composition API与Vue2.x 使用的 Options API
小糖穿越火线
03-14 823
Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？ 开始之前 Composition Api 可以说是Vue3最大的特点，那么为什么要推出Composition Api，解决了什么问题？ 通常使用Vue2开发的项目，普遍会存在以下问题： 代码的可读性随着组件变大而变差 每一种代码复用的方式，都存在缺点 TypeScript支持有限 以上通过使用Composition Api都能迎刃而解 一、Options Api Options AP
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、付费专栏及课程。

余额充值