Composition API——setup函数

一、Options API的弊端
Options api的一大特点就是在对应得属性中编写对应的模块。比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命
周期钩子。但是这种代码有一个很大的弊端：当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）。
如下图所示，使用option api和composition api之间的对比

二、composition api
为了开始使用Composition API，我们需要有一个可以实际使用它（编写代码）的地方,在Vue组件中，这个位置就是 setup 函数。setup其实就是组件的另外一个选项，只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项，比如methods、computed、watch、data、生命周期等等。
三、setup api的参数
setup的api中参数有两个，第一个是props，就是父组件传递给子组件的参数(并且在setup外部通过props进行声明定义的)。第二个参数是context，表示上下文，其为一个对象，可以结构出attrs, slots, emit。attrs表示父组件传递过来的，非props属性。slots表示插槽，emit表示向父组件发送事件，相当于之前的this.$emit()。

四、setup函数的返回值
setup函数的返回值，可以在template中使用，也就是说我们可以设置setup中的值，来代替data作用。