1.前言
最近在做vue3相关的项目，用到了组合式api，对于vue3的语法的改进也是大为赞赏，用起来十分方便。对于已经熟悉vue2写法的同学也说，上手还是需要一定的学习成本，有可能目前停留在会写会用的阶段，但是setup带来哪些改变，以及ref,reactive这两api内部实现原理到底是什么，下面先来总结：
setup带来的改变：
1.解决了vue2的data和methods方法相距太远，无法组件之间复用
2.提供了script标签引入共同业务逻辑的代码块，顺序执行
3.script变成setup函数，默认暴露给模版
4.组件直接挂载，无需注册
5.自定义的指令也可以在模版中自动获得
6.this不再是这个活跃实例的引用
7.带来的大量全新api，比如defineProps，defineEmits，withDefault，toRef，toRefs
ref带来的改变：
Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式数据
Ref作TS的类型标注
reactive带来的改变：
可以使用 reactive() 函数创建一个响应式对象或数组
reactive可以隐式地从它的参数中推导类型
使用interface进行类型标注
2.setup
在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用 <script setup> 来大幅度地简化代码。
<script setup> 中的顶层的导入和变量声明可在同一组件的模板中直接使用。你可以理解为模板中的表达式和 <script setup> 中的代码处在同一个作用域中。
里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup>中的代码会在每次组件实例被创建的时候执行。
官方解答：
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：
更少的样板内容，更简洁的代码。
能够使用纯 TypeScript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
setup执行是在创建实例之前就是beforeCreate执行，所以setup函数中的this还不是组件的实例，而是undefined，setup是同步的。
