在 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。