Vue3 composition API （Why 、How & When)

为什么使用 composition API ?

vue2的局限促使我们使用vue3。具体如下：

随着组件变得更大, 逻辑关注点的列表也会增长。碎片化使得可读性和可维护性也变低。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API 使我们能够做到的。
当前的代码重用模式具有缺点。
Vue 2不支持TypeScript。

vue2 limitation局限一：可读性 👇

具体写法👇（setup并非一个巨大的method），当使用Composition API 按功能组织组件时，可将功能分组为通过设置方法调用的组合功能。

注意：现在，可以使用逻辑关注点（也称为“功能”）来组织我们的组件。

但是，这并不意味着我们的用户界面将由更少的组件组成。仍将使用良好的组件设计模式来组织我们的的应用程序。

局限二：没有完美的方法可以在组件之间重用逻辑。

关于跨组件重用代码，在Vue 2中有3种好的解决方案可以做到这一点，但是每种解决方案都有其局限性。

示例如下，首先，有Mixins。

Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。

优点

Mixins可以按功能进行组织。比如，页面的风格不用，但是执行的方法和需要的数据类似时。

缺点

它们容易发生冲突，并且您最终可能会遇到属性名称冲突。
不清楚混合素如何相互作用（如果有的话）。（⚠️ 1. mixin的数据对象和组件的数据发生冲突时以组件数据优先。⚠️ 2. 同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。⚠️ 3. 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。）
如果要配置Mixin以在其他组件之间使用，则不容易重用。

其二，Mixin工厂，这是返回自定义版本的Mixin的函数。

如您在上面看到的，Mixin工厂允许我们通过发送配置来自定义Mixins。现在，我们可以配置此代码以在多个组件中使用。

优点

现在我们可以配置代码，因此可以轻松重用。
关于我们的Mixins交互方式，我们具有更明确的关系。

缺点

命名间隔需要严格的惯例和纪律。
我们仍然有隐式的属性添加，这意味着我们必须查看Mixin内部以找出它公开的属性。
在运行时没有实例访问权限，因此无法动态生成Mixin工厂。

最后，还有一个解决方案通常是最有用的作用域插槽 slot 👇

slot使用场景如下：

- 该组件被多个地方使用
- 每个父组件中对该组件的内部有一部分需要特殊定制
- slot可以让我们更好的复用组件的同时并对其定制化处理
- 可以理解为父组件想子组件传递了一段 html 文本
要求:
    1.子组件模板包含至少一个 插槽 <slot></slot>
    2.父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身