本页目录
可以把 setup 语法糖理解为是使用组合式 API 的地方。
setup 选项是一个接收 props 和 context 的函数，
接收一个props和context函数并且将setup内的内容通过return暴露给组件的其余部分。
注意
在 setup 中：
- 组件自动注册，不需要额外声明（自动将文件名定义）
- 不再声明 beforeCreate 和 create
- 无法使用 this （所以找不到组件实例无法获取到 data、methods 等）
- 属性方法不需要 return
组合式 API 可以提高代码的复用性与可读性，使项目更易维护，其中包括：
- 响应式 API： 比如
ref()和reactive() - 生命周期钩子： 比如
onMounted()和onUnmounted() - 依赖注入：比如
provide()和inject() - 父子组件之间的交互：
defineProps和defineEmits、defineExpose
由于在执行 setup 函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
由于我们不能在 setup 函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup 函数中的 this 修改成了 undefined
引入
在页面中，组件 API 按需引入：
import { ref, watch, toRefs, reactive,toRef, computed, defineEmits } from 'vue';定义响应式数据
ref 与 reactive
在 setup 中，数据并不是响应式的，所以需要使用 ref 或者 reactive 对数据进行处理，也就是创建响应式数据。