在 Vue2 中，我们编写组件的方式是 Options API，Options API 的一大特点就是在对应的属性中编写对应的功能模块，比如 data 定义数据、methods 中定义方法、computed 中定义计算属性、watch 中监听属性改变，也包括生命周期钩子等。
实现功能时，这个功能对应的代码逻辑会被拆分到各个属性中；随着组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散。
Composition API 能将同一个逻辑关注点相关的代码收集在一起，在 Vue 组件中，setup 函数使用 Composition API。
setup()#
setup 主要有两个参数：第一个参数：props；第二个参数：context。父组件传递过来的属性会被放到 props 对象，在 setup 函数中想要使用 props，那么不可以通过 this 去获取。context，也称之为是一个 SetupContext，它里面包含三个属性：attrs：所有的非 prop 的 attribute；slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）；emit：当我们组件内部需要发出事件时会用到 emit（因为我们不能访问 this，所以不可以通过 this.$emit 发出事件）。
setup 既然是一个函数，那么它也可以有返回值，它的返回值可以在模板 template 中被使用，也可以通过 setup 的返回值来替代 data 选项，还可以返回一个执行函数来代替在 methods 中定义的方法。
reactive && ref#
为对于一个定义的变量来说，默认情况下，Vue 并不会跟踪它的变化，来引起界面的响应式操作。为了在 setup 中定义的数据提供响应式的特性，需要使用 reactive 函数或 ref 函数。
reactive api 对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型。基本类型可以使用 ref api，它会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，可以用 ref.value 访问原始数据值。
readonly#
readonly 方法会返回 reactive 或者 ref 获取到的响应式对象的只读代理，使之传入到其他组件时不被修改。
composition api 中的组件生命周期#
可以使用直接导入的 onX 函数注册生命周期钩子
script setup 语法#
任何在script setup>`声明的顶层的绑定(包括变量，函数声明，以及 import 引入的内容)都能在模板中直接使用。
为了在声明 props 和 emits 选项时获得完整的类型推断支持，我们可以使用 defineProps 和 defineEmits api，它们将自动地在<script setup>中可用。
使用<script setup>的组件是默认关闭的，通过模板 ref 或者$parent 链获取到的组件的公开实例，不会暴露任何在<script setup>中声明的绑定，通过 defineExpose 编译器宏来显式指定在<script setup>组件中要暴露出去的 property。