【Vue3.0+Ts】—— composition API(一)

本文介绍了Vue3.0的Composition API,旨在解决Options API的局限性,提供更清晰的代码组织方式。文章详细讲解了Mixin的使用,包括基本使用、合并规则和全局混入。接着,文章提到了extends属性,并探讨了Options API的弊端。最后,文章重点介绍了setup函数,包括其参数、返回值以及不能使用this的原因,阐述了Composition API如何改进Vue组件的可读性和可维护性。
摘要由CSDN通过智能技术生成

一、什么是composition API

Composition API是Vue的下一个主要版本中最常用的讨论和特色语法。这是一种全新的逻辑重用和代码组织方法·

当前,我们使用所谓的Options API构建组件。为了向Vue组件添加逻辑,我们填充(选项)属性,例如数据,方法,计算的等。这种方法的最大缺点是,这本身并不是有效的JavaScript代码。您需要确切了解模板中可以访问哪些属性,以及此关键字的行为。在后台,Vue编译器需要将此属性转换为工作代码。因此,我们无法从自动建议或类型检查中受益。

Composition API的目的是通过将当前可用组件属性作为JavaScript函数暴露出来的机制来解决这个问题。Vue核心团队将Composition API描述为“一组基于功能的附加API,可以灵活地组合组件逻辑”。使用 Composition API 编写的代码更易读,而且没有任何幕后的魔力,更容易阅读和学习。

二、认识Mixin

 目前我们是使用组件化的方式在开发整个Vue的应用程序,但是组件和组件之间有时候会存在相同的代码逻辑,我们希望对相同的代码逻辑进行抽取。

  • 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成:

Mixin提供了一种非常灵活的方式,来分发Vue组件中的可复用功能;

  • 一个Mixin对象可以包含任何组件选项;
  • 当组件使用Mixin对象时,所有Mixin对象的选项将被 混合 进入该组件本身的选项中;

1. Mixin的基本使用

2. Mixin的合并规则 

如果Mixin对象中的选项和组件对象中的选项发生了冲突,那么Vue会如何操作呢?
这里分成不同的情况来进行处理
情况一:如果是data函数的返回值对象

  • 返回
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值