开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情

Vue3中最大的更新就是组合式函数，或者叫做Composition API,这不仅是代码上的一次更新，更是vue编程思路上的一次进步，可以说vue有了不输于react hooks 的编程思想

什么是Composition API

我认为的Composition API就是一个带有复用状态逻辑的函数。它可以使用vue3中全部的api,从而将vue由配置项式的组件API变为一种函数式的API.

为什么是Composition API

当我们封装组件的时候，其实就是为了复用DOM，而这些DOM又需要状态来驱动改变。

但是，现在我们发现，很多组件中还有相同或类似的方法，在配置式API中，我们很难复用。因为我们的数据和方法耦合了。我们方法只能访问这个组件内的数据，它的this是指向这个组件的。如果我们把它分离出去，我们需要处理这一点。

在之前的vue2中，为了解决这一点，提供了mixins，但是又带来了来源不清的问题，如果有一个相同名字的mixin，我们的程序可能就会报错了。

但是在vue3中，首先做的第一步，是先把vue中几乎所有API都去解耦了，让我们可以直接import进来使用。同时，在breforeCreate之前，再加入一个生命周期，setup,在这里，我们可以自由的通过一个函数来调用vue3的api。

首先，setup中没有this，意味着我们不需要处理this问题。

其次，函数的作用域是天然的屏障，我们数据和逻辑自然而然的结合在一起，当我们复用的时候，不是组件，而是组件内的方法和数据，这样就保证了方法完整性。