Vue3的组合式API浅谈,为什么要用组合式API,组合式API的优缺点

在vue2中,我们使用的语法是optionAPI,它为我们准备好了一个固定的规则:数据应该放到data里,方法应该放到methods中......这样做有很多好处,比如:学习难度小、代码更容易组织等等,但是对于有些领域optionAPI并不能起效,尤其是在大型组件和逻辑复用上,这点在Vue官方文档上也有提及:

  • 对于大型组件(JS代码有数百行)

不易维护或拆分:optionAPI在开发时固然更容易组织代码了,但是在维护时却需要维护人员不断地上下移动来查看不同区域的不同代码,如果一个组件包含了不同的逻辑,那就更乱了,这种跳跃式的散乱代码非常不利于后续维护,而对于某些项目来说,可维护性要远大于可重用性

而对于compositionAPI(组合式API)来说,开发人员可以把逻辑和数据组合到一起,而不是散乱在各种配置之中,还可以提取到一个函数或者一个文件中,大大提高了项目的可维护性。

  • 不易在多个组件中提取和复用逻辑

道理和上面基本相同,想要复用js代码就需要从散乱的代码中对数据和方法挨个提取、导入,除非开发时就想好了哪里可以复用,并且将其完整的封装到了一个vue文件中。

组合式API的重点是 把功能或职责相关的代码全部整合到一起,而不是html文件放在html文件夹中,js文件放在js文件夹中,这是optionAPI难以做到的事情(除非组件功能足够单一,但也会存在组件通信繁琐复杂的问题)。
组合式API的缺点是语法更加繁琐,需要记忆的东西更多了(比如import引入、响应式数据的转换、响应式数据修改与展示的.value等等),略微提高了开发耗时,但这不应该是组合式API的思路上的问题,而更多的是Vue3实现上的问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3的组合式API是一种新的编程模式,它使得在Vue组件中可以更灵活地组织和复用逻辑。下面是对Vue 3组合式API的介绍: 1. Composition API组合式API):Vue 3中引入了Composition API,它允许我们将逻辑按照功能进行组合,而不是按照生命周期钩子进行划分。这样可以更好地组织和复用代码。 2. setup函数:在Vue 3中,我们需要在组件中使用setup函数来定义组合式API。setup函数在组件创建之前执行,并且接收两个参数:props和context。我们可以在setup函数中定义响应式数据、计算属性、方法等。 3. reactive函数:reactive函数是Vue 3中用来创建响应式数据的函数。我们可以使用reactive函数将普通对象转换为响应式对象,从而实现数据的双向绑定。 4. ref函数:ref函数是Vue 3中用来创建单个响应式数据的函数。与reactive函数不同,ref函数返回一个包装过的对象,我们需要通过.value属性来访问和修改数据。 5. computed函数:computed函数用来创建计算属性。与Vue 2中的计算属性类似,我们可以使用computed函数来定义一个依赖其他响应式数据的属性。 6. watch函数:watch函数用来监听响应式数据的变化。我们可以使用watch函数来执行一些副作用操作,比如发送网络请求或者更新DOM。 7. 生命周期钩子:在Vue 3中,生命周期钩子函数被废弃了,取而代之的是使用setup函数来处理组件的生命周期逻辑。我们可以在setup函数中使用onMounted、onUpdated等函数来模拟Vue 2中的生命周期钩子。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值