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> 来大幅度地简化代码。

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup>中的代码会在每次组件实例被创建的时候执行。

官方解答：

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

    更少的样板内容，更简洁的代码。
    能够使用纯 TypeScript 声明 props 和自定义事件。
    更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
    更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

setup执行是在创建实例之前就是beforeCreate执行，所以setup函数中的this还不是组件的实例，而是undefined，setup是同步的。