前言

从源码层面来说，使用Proxy代替Object.defineProperty的API，一个是代理的对象，一个是递归监控的属性，从而在性能上有了很大的进步，并且，也解决了对象动态属性增加、数组改变监听上的缺陷；对diff算法进行优化，增加了静态标记，大大提高了Vue的执行效率；还有静态提升、事件监听缓存等一系列提升效率的手段。

从应用层面来说，主要的改变是将option API改成了composition API（组合式API），在业务中抛弃data、methods、生命周期函数隔离开的开发方式，使代码相对于业务有更强的聚合性，在代码开发、代码阅读、代码维护方面对于开发者都是更加友好。

对于typescript有了更好的支持，我们知道，对于大型的前端项目来说，使用typescript的类型校验，能使前端项目有更强的健壮性，这也使得Vue3对于大型项目的开发提供了更强的质量保证。

组合式API

所谓的组合式API，将Vue2中的data、methods、生命周期、数据监听等option，都封装成钩子函数，然后组合到setup函数中，其核心就在于setup函数。setup函数存在的意义，就是为了使用这些新增的组合式API，并且这些API只能在setup函数中使用。

setup函数执行的时机是，props初始化之后，beforeCreate函数执行之前，所以在执行setup时，还没有初始化Vue实例，因此在setup中不能使用this对象。setup函数的返回值会被注入到Vue实例中，供Vue组件使用，所以任何数据想在Vue组件的模板中使用，必须在setup函数中return出去。

组合式API的组合，体现在两个层面。第一层的意思是，将某一业务相关数据和处理逻辑放到一起，这是一种关注点的聚合，更方便我们编写代码、处理业务逻辑，并且能更聚焦业务逻辑，更方便我们看代码。第二层面的意思，当某个组件的业务逻辑足够复杂，setup中的代码足够大的情况下，我们可以在setup内部，进一步提取相关的一块业务，使代码逻辑更加清晰，做到了进一步的聚合作用。

响应式API

在Vue3中响应式API，主要体现在ref和reactive两个函数。对于响应式API，想说两个问题，第一个是为什么要增加响应式API，第二个是响应式API函数ref和reactive的异同点。

为什么增加响应式API

在Vue2中所有数据都写在data的option中，data中的数据都是响应式的，这样产生的一个问题是，有些常量数据本身不需要监听，从而造成了资源的浪费。所以在Vue3中增加了响应式API，只需要对需要动态更新dom的数据进行响应式，不需要动态更新dom的数据不进行响应式处理，从很大程度上节省了资源。这里我觉得需要注意的是，写代码的时候一定要仔细思考一下，哪些数据需要进行响应式绑定，哪些数据不需要进行响应式绑定，而不是一股脑的全给绑定上，这样即使代码逻辑不能很清晰易懂，并且也会影响执行效率

ref和reactive的异同点

在了解了为什么要增加响应式API后，我们发现Vue3提供了两个响应式API函数，ref和reactive。为什么会提供两个API呢？ 一个不就可以了吗？那么这两个API之间的区别是什么呢？

在使用层面，ref绑定的数据，需要使用[data].value进行数据更改。而reactive绑定的数据需要使用[data].[prpoerty]的方式进行数据更改。在使用场景方面，一般的，单个的普通数据，我们使用ref来定义响应式。而复杂数据，如：表单数据对象、某一模块的一组数据等，使用reactive来定义响应式。

那么，对象是不是必须用reactive来定义呢？ 其实不是的，都可以。官方说法是：可以根据自身习惯使用不同的API。其实，我觉得，他们是有各自的使用场景的，ref更强调的是数据Value的改变，reactive更强调的是数据中某一属性的改变。