【Vue3.0+Ts】—— composition API（一）

一、什么是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函数的返回值对象

• 返回值对象默认情况下会进行合并；
• 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；

情况二：如何生命周期钩子函数

• 生命周期的钩子函数会被合并到数组中，都会被调用；

情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。

• 比如都有methods选项，并且都定义了方法，那么它们都会生效；
• 但是如果对象的key相同，那么会取组件对象的键值对；

3. 全局混入Mixin

 如果组件中的某些选项，是所有的组件都需要拥有的，那么这个时候我们可以使用全局的mixin：

• 全局的Mixin可以使用 应用app的方法 mixin 来完成注册；
• 一旦注册，那么全局混入的选项将会影响每一个组件；

三、extends（了解）

另外一个类似于Mixin的方式是通过extends属性：允许声明扩展另外一个组件，类似于Mixins；

 

在开发中extends用的非常少，在Vue2中比较推荐大家使用Mixin，而在Vue3中推荐使用Composition API。 

四、Options API的弊端

 在Vue2中，我们编写组件的方式是Options API：

• Options API的一大特点就是在对应的属性中编写对应的功能模块；
• 比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；

但是这种代码有一个很大的弊端：

• 当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；、
• 当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；
• 尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的；

下面我们来看一个非常大的组件，其中的逻辑功能按照颜色进行了划分：

• 这种碎片化的代码使用理解和维护这个复杂的组件变得异常困难，并且隐藏了潜在的逻辑问题；
• 并且当我们处理单个逻辑关注点时，需要不断的跳到相应的代码块中；

五、认识Composition API

 那么既然知道Composition API想要帮助我们做什么事情，接下来看一下到底是怎么做呢？

• 为了开始使用Composition API，我们需要有一个可以实际使用它（编写代码）的地方；
• 在Vue组件中，这个位置就是 setup 函数；

setup其实就是组件的另外一个选项：

• 只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项；
• 比如methods、computed、watch、data、生命周期等等；

接下来我们一起学习这个函数的使用：

• 函数的参数
• 函数的返回值

1. setup函数的参数

我们先来研究一个setup函数的参数，它主要有两个参数：

• 第一个参数：props
• 第二个参数：context

props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可以直接通过props参数获取：

• 对于定义props的类型，我们还是和之前的规则是一样的，在props选项中定义；
• 并且在template中依然是可以正常去使用props中的属性，比如message；
• 如果我们在setup函数中想要使用props，那么不可以通过 this 去获取
• 因为props有直接作为参数传递到setup函数中，所以我们可以直接通过参数来使用即可；

另外一个参数是context，我们也称之为是一个SetupContext，它里面包含三个属性：

• attrs：所有的非prop的attribute；
• slots：父组件传递过来的插槽
• emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）；

2. setup函数的返回值

 setup既然是一个函数，那么它也可以有返回值，它的返回值用来做什么呢？

• setup的返回值可以在模板template中被使用；
• 也就是说我们可以通过setup的返回值来替代data选项；

甚至是我们可以返回一个执行函数来代替在methods中定义的方法：

但是，如果我们将 counter 在 increment 或者 decrement进行操作时，是否可以实现界面的响应式呢？

• 答案是不可以；
• 这是因为对于一个定义的变量来说，默认情况下，Vue并不会跟踪它的变化，来引起界面的响应式操作 

3.  setup不可以使用this 

 官方关于this有这样一段描述

• 表达的含义是this并没有指向当前组件实例；
• 并且在setup被调用之前，data、computed、methods等都没有被解析；
• 所以无法在setup中获取this；