Vue3的性能提升主要是通过哪几方面体现的？

javascript -> typescript

Vue3相较于Vue2，其使用TypeScript完全重写了vue源码，ts的优势不用多说，它带来的类型检查的能力不论是对于vue内部还是项目本身，都很大程度上的减少了代码错误出现频率，进而提升了整体的项目质量与性能。

Object.defineProperty -> Proxy

Vue2采用Object.defineProperty实现的响应式，虽然实现了响应式，但其有一定的限制，比如无法检测到新的属性添加，且处理大型数据结构时性能并不理想。

Vue3采用Proxy代理来实现响应式，不但解决了Object.defineProperty的无法检测到新的属性添加等问题，更是答复提高了处理大型数据结构时的性能。

如下是一个大型的数据结构：

data() {
    return {
        a : {
            b : {
                c : {
                    d : {
                        e : {
                            f : 1
                        }
                    }
                }
            }
        }
    }
}

Object.defineProperty()的处理方式是深度遍历，为对象上的每一个属性添加getter 和 setter ，使其变为响应式。有几个这样的对象，就需要遍历几个这样的对象，性能可想而知。

Proxy的处理方式与Object.defineProperty的处理方式大相径庭，Proxy只会在你用到深层次嵌套结构中的数据时才会遍历到对应的层级进行响应式处理。而且，动态为Proxy添加属性也会被Proxy捕捉到，直接将其变为响应式。

虚拟DOM与Diff算法优化

详情请见：Vue3是如何升级虚拟DOM模块的？

减小框架大小

框架的大小也会影响其性能。这是 Web 应用程序的重要关注点，因为需要动态下载资源，并且在浏览器解析必要的 JavaScript 之前，该应用程序将是交互式的。对于单页应用程序尤其如此。尽管 Vue 一直是相对轻量级的（Vue 2 的运行时大小压缩为 23 KB），但我们注意到了两个问题：

首先，并不是每个人都使用框架的所有功能。例如，从未使用过渡组件的应用仍会下载与过渡相关的代码和并且花时间去解析它。

其次，当我们添加新功能时，该框架会无限的变大。当我们考虑新功能添加的时候，不得不考虑到尺寸的问题。因此，我们倾向于框架仅包含大多数用户会使用的功能。

理想情况下，用户应该能够在构建时删除未使用的框架功能的代码-也称为“Tree Shaking” -只打包他们使用的代码。这也将使我们能够发布一部分用户会觉得有用的功能，而不会增加其余用户的有效下载成本。

在 Vue 3 中，我们通过将大多数全局 API 和内部帮助程序移至 ES 模块导出来实现了这一目标。这使现代打包工具可以静态分析模块依赖性并删除与未使用的导出相关的代码。模板编译器还会生成 Tree Shaking 友好的代码，如果该功能实际上在模板中使用，则该代码仅导入该功能的帮助程序。

框架的某些部分永远不会 Tree Shaking，因为它们对于任何类型的应用程序都是必不可少的。我们将这些必不可少的部分的度量标准称为基础尺寸。尽管增加了许多新功能，但 Vue 3 的基准尺寸 gzip 后大约只有 10KB ，甚至还不到 Vue 2 的一半。

提高 Vue 处理大型应用程序的能力

公开较为底层的数据驱动视图和组件生命周期 API，以实现一种更自由形式的编写组件逻辑的方式，称为 Composition API。无需通过指定一长串选项来定义组件，Composition API 允许用户像编写函数一样自由地表达，编写和重用有状态组件逻辑，同时提供出色的 TypeScript 支持。 Composition API 是对 Options API 的补充。