vue3中的Composition API

vue2中,我们会在methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API。相信用过的都知道，方便是挺方便，不过缺点也很明显，当项目越来越大，很可能一个methods下就有二三十个方法， 还得确切地知道方法中可以访问哪些属性以及this关键字的行为，维护起来就十分麻烦了。Composition API（组合API）就是解决这个问题而生的。

一、好处

上面这张图很明显的说明了它的优点，vue3 Composition API 中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有api会放在一起（更加的高内聚，低耦合），这样做，即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API，而不像vue2 Options API 中一个功能所用到的API都是分散的。Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。下面我们来看个例子：

可以很明显的看到，vue3中在setup再也不用考虑各种this指向了，也不需要在data中去定义然后methods去使用了，自由度更高、更灵活了
看来上面的例子，你可能很感兴趣上面setup这个函数了：

简而言之，它只是一个函数，它将属性和函数返回到模板。 我们在这里声明所有的响应式属性、计算属性、观察者和生命周期钩子，然后返回它们，以便它们可以在模板中使用。 我们没有在setup函数返回的内容将在模板中不可用，还有以下几个特点 ：
1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法（首先创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期的角度看，它会在 beforeCreate 钩子之前被调用）
2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined
3、setup函数只能是同步的不能是异步的

二、新的api

compositon-api提供了一下几个函数
1.reactive
2.watchEffect
3.computed
4.ref
5.toRefs

官网介绍：可以用来为源响应式对象上的 property 性创建一个 ref然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接

通过上面这个例子不难看出，通过toRefs转化过的对象，有了一个ref对象才有的__v_isRef: true属性，toRefs将reactive定义的对象变成了一个响应式对象，这也正是toRefs的作用。
使用场景：使用父组件传递的props数据时，要引用props的某个属性且要保持响应式（能这样使用的原因是因为toRefs创建的对象是对象引用而不是原始数据的拷贝，改变现有对象会同时改变原有对象）。
小知识：

看过vue3代码的同学对于这种...toRefs(persen)的应该不陌生，这种写法主要是用了ES6解构赋值的思想，按照图上来说，persen对象被解构出来，变成了属性name和age，界面中调用时只需使用{{name}}和{{age}}而不用使用persen.name访问了，极其的方便。
经过以上了解，在setup中定义变量时，为了使代码可读性更高，推荐使用reactive+toRefs定义变量（reactive此时的作用就类似于vue2中的data了）

6.生命周期的hooks