Vue2的历史痛点

• 源码问题：源码自身的可维护性问题
• 性能问题：数据量增大带来的渲染和更新的性能问题
• 兼容性问题：为了兼容一直保留的鸡肋API
• 类型检查问题：类型推断不够友好

因此，vue3作者希望做一系列改进：

一.更小的打包体积

Vue3移除一些不常用的API，引入tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了。
Vue2中，无论使用什么功能，最终都会出现在生产代码中，主要原因是Vue实例在项目是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。
简要原理：tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。像我们在项目中没有引入 Transition、KeepAlive 等不常用的组件，那么它们对应的代码就不会打包进去。

二.更快的渲染速度

1.diff算法优化

Vue3在diff算法中相比Vue2增加了静态标记 关于这个静态标记，作用是为会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较。为不会发生变化的节点打上另一种标记，在重渲染diff比较时该节点则不会比较，让性能进一步提高了。

2.静态提升

Vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用，这样就可以免去了重复的创建节点。

3.事件监听缓存

默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没必要去追踪它的变化，想办法将它直接缓存起来复用就会提升性能。因此要打开事件监听缓存，这样静态标记就不存在了，这部分内容也就不会进行比较了。

4.SSR优化

当静态内容达到一定量级的时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会直接innerHtml，就不需要创建对象，然后根据对象渲染。

三.编码更友好

1.Composition API

在Vue2中Options API不够灵活，组件间很难优雅的共用代码。 在Vue3中，舍弃了Options API，开始使用Composition API。组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起, 使逻辑代码更加的高内聚，低耦合。把一些相关联的状态和方法封装成hook函数。

2.使用Proxy代替Object.defineProperty

在Vue2中通过Object.defineProperty的get、set和发布订阅来完成响应式，但Object.defineProperty的get、set并不能监控深层的对象、新增属性、删除属性和数组的变化，如果存在深层的嵌套对象关系，需要深层次的进行监听，造成了性能的极大问题。
为了解决Vue2中的那些问题，在Vue3中引入了Proxy，Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，包括新增属性和删除属性，并且Proxy可以监听数组的变化。

3.更好的TypeScript集成

更好的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告