一个例子讲清Vue的Composition API

一、Composition API概述

当我们编写Vue组件时候，组件中可能包含一系列的功能，例如一个代码仓库管理的应用，用户的仓库列表可以看做是一个组件，这个组件还包含筛选、搜索的功能。

所谓的功能我们可以理解为MVC中的Model和Controller。从视图角度，组件是最基本的代码复用单元，但是从逻辑上，功能模块是最基本的代码复用单元。

每个组件中可能包含多个功能（也称为关注点），而多个功能的代码会分散在Vue组件的各个部分：data/props/watch/computed/dom event callback/lifescycle。

这会带来两个问题：

1. 可读性和可维护性差，比如我们想要阅读某个功能的逻辑，需要翻遍整个组件，到处查看相应的逻辑；当需要改动某个功能时候，需要在很多地方进行改动。
2. Vue未提供功能模块级别的代码复用支持，只提供组件级别的复用的话，在大型项目中是不够的。

为了解决上面两个问题，Vue需要提供功能模块级别的代码组织方式，即需要将同一个功能模块的代码写在同一片区域，而不是分散到组件的各个API中，另外还需要支持功能模块的封装，以便我们可以提取功能模块的代码进行复用。

如何实现上述两个能力呢？我们看看一个功能模块都包含哪些内容。

1. 数据
2. 数据的计算
3. 数据的更新
4. 数据监听

其中数据部分的代码写在Vue组件中的data、props中

数据计算部分的代码写在Vue组件中的computed和处理数据的方法中

数据更新部分代码写在生命周期钩子方法和交互事件中

数据监听代码写在watch中

因此我们希望Vue能提供一个API，让我们把一个功能模块（即关注点）的这些代码（包括data/props/computed/watch/dom event callback/lifecycle）都写在一起。并且能将其提取。

组合式API就提供了这样的能力。

总之，组合式API是在Vue3中新增加的API，它有两点优势：

1. 让功能模块代码（关注点）聚合在一起，使可读性和可维护性更高。
2. 提供了一种功能模块级别的复用代码的方式。

二、Composition API使用