一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
Composition API 是 Vue3 新增新的功能，学习 Composition API 的最好方式就是查看官方的 RFC，RFC 的全称是 Rquest For Comments。Vue2 升级到 Vue3 大的变动都是通过 RFC 的机制进行确认。首先官方给出一些提案，然后收集反馈并讨论，最终确认。Vue 官方的 RFC 地址：github.com/vuejs/rfcs。 Composition API RFC 文档地址：composition-api.vuejs.org。 在 Composition API RFC 文档中介绍了 Composition API 的使用。我们先来介绍一下 Composition API 的设计动机。
Options API 设计动机
Vue2.x 在开发中小型项目的时候已经很好用，但是使用 Vue2.x 在开发需要长期迭代和维护的大型项目的时候，也会有一些限制。在大型项目中，可能会有一些功能比较复杂的组件。我们在看他人开发的组件的时候，可能会很难看懂。原因是 Vue2.x 版本的组件开发采用的是 Options API。 Options API 指的是我们使用一个包含描述组件选项的对象来创建组件的方式，这种方式我们经常使用创建一个组件的时候，经常会设置data、methods、props 的生命周期的钩子函数等，这些都是选项。这些选项组成了一个对象来描述我们的组件。如果我们去看他人开发的复杂组件，可能会比较难以看懂。因为同一个功能的代码会涉及到 data、methods、props 等多个选项，也就是同一个功能逻辑的代码可能会被拆分到不同的选项中。为了查看某个功能，可能会需要不停的上下拖动滚动条来找到同一功能对应代码。
Options API 使用阿里
export default{
data(){
return{
position:{
x:0,
y:0
}
}
},
created(){
window.addEventListener('mousemove',this.handle)
},
destroyed(){
window.removeEventListener('mousemove',this.handle)
},
mothode:{
handle(e){
this.position.x=e.pageX
this.position.y=e.pageY
}
}
}
这段代码是描述一个组件，这个组件是使用 Options API 的方式来创建的。它的功能很简单，当鼠标移动的时候，把鼠标的位置展示在页面上。我们的功能就是获取鼠标的位置，并展示到页面。那来看代码的实现。 鼠标的位置在 data 选项中定义了一个 position，注册 mousemove 事件是在生命周期的钩子函数 created 中,还需要在组件销毁的时候移除事件,在 destroyed 这个钩子函数中去移除了mousemove 这个事件。最后还需要在 methods 选项中添加一个函数，用来记录我们鼠标的位置。
我们来想一下，现在如果我们需要给这个组件添加一个新的功能，比如新增一个搜索的功能，那此时我们也需要在多个选项中增加代码。比如我们需要在 data 以及 methods 中分别添加对应的代码。如果代码量比较多的话，我们查看某个功能的话，就会不停的上下拖动滚动条来找到你想要的代码的位置。另外使用 options API 还难以提取组件中可重用的逻辑。虽然 Vue2 中有混入的机制，可以把组件中重复的代码提取并重用，但是混入的机制使用的过程也有问题，比如命名冲突或者数据来源不清晰。
Composition PAI 设计动机
我们先来介绍一下 Composition API。它是 Vue3.0 中新增的一组 API，它是一组基于函数的 API，让我们可以更灵活的组织组件的逻辑。
import {reactive,onMounter,onUnmounter} from 'vue'
function useMousePosition(){
const position=reactive({
x:0,
y:0
})
const update=(e)=>{
position.x=e.pageX
position.y=e.pageY
}
onMounted(()=>{
window.addEventListener('mousemove',this.handle)
})
onUnmounted(()=>{
window.removeEventListener('mousemove',this.handle)
})
return position
}
export default{
setup(){
const position =useMousePosition()
return {
position
}
}
}
在这个案例中，首先把获取鼠标位置的这个逻辑封装到了一个 useMousePosition 函数里。其他组件也可以直接使用这个函数做封装的功能。我们只需要把 useMousePosition 提取到一个模块中，然后再在其他组件中导入即可。当我们需要新增功能的时候，比如添加搜索功能的时候，我们只需要再添加一个搜索的函数，把搜索的功能封装起来。将来哪个组件中需要只需要在这个组件的 setup 函数中去来调用我们这些函数。比如当前这个案例，它在 setup 里边就利用了我们的 useMousePosition 来实现获取鼠标位置的这个功能。相对于 Options API 这样做的好处是查看某个逻辑的时候，只需要关注具体的函数即可。当前的逻辑代码都封装在函数内部，不限 Options API 的时候，获取鼠标位置的逻辑代码分散在不同的位置。查看这部分代码还需要上。
Options API 与 Composition API 区别
看一下官方提供的这张图》
Options API 中，同一色块代表了同一个功能，我们可以看到相同功能的代码被拆分在不同的位置。我们来看绿色代码块，它有三部分。首先最上面的这个部分是 data 中的代码，中间的这块是 computer 中的代码，最后是 message 中的代码。当组件的功能比较复杂。例如上图中，同一逻辑的代码被拆分在不同的位置，我们需要不停的拖动滚动条来找到我们需要的代码，而且不方便提取重用代码。
Composition API 也是使用相同的色块来代表同一功能。那我们可以清晰的看到同一功能的代码不需要拆分，有利于对代码的提取和重用。绿色代表的是一个逻辑功能，我们可以把这部分代码提取到一个模块中，然后在其他组件中可以重用。需要注意的是，在 Vue3 中，你既可以使用 Options API，也可以使用 Composition API。Composition API 对 Vue3 来说只是一组新增的 API，你可以根据自己的喜好来选择。当然如果你开发的组件中需要提取可复用的逻辑，那这个时候你可以选择使用 Composition API，它会更方便一些。
总结一下。首先 Composition API 提供了一组基于函数的 API，这样我们可以更灵活的组织组件的逻辑使用Composition API 可以更合理的组织组件内部的代码结构，还可以把一些逻辑功能从组件中提取出来，方便其他组件重用。
