Vue3 在内部实现上进行了大量的优化，使得渲速度更快，性能更好，内存占用更少。

例如对响应式的处理以及重写 diff 算法 ；

响应式系统升级：Vue3 使用了 Proxy 替代 Object.defineProperty 实现响应式，并且使用了静态提升技术来提高渲染性能。

Diff 算法重写：新增了最长递归子序列的算法，来计算出最小的修改偏移量。还增加了静态标记

Vue3 引入了 Composition 组合式APl，允许开发者更好地组织和复用逻辑代码，提高代码的可维护性。

提供了完整的类型定义

Vue3 更注重模块上的拆分，还对所有的 API 进行重写。采用函数式编程，使得 Vue3 支持更好的 Tree Shaking，精确地实现了按需引入，减少了打包体积。

如片段、Teleport 、suspence等

总的来说，Vue3 在性能、可维护性和特性上都有所提升。但是需要注意的是，由于 API 发生了较大的变化，因此 Vue3 与 Vue2 之间并不完全兼容，需要进行相应的迁移工作。

Vue2 和 Vue3 在设计理念、性能提升、编码方式以及 API 特性上都有很大的区别。

① Vue3 更注重模块上的拆分，而在 Vue2 中无法单独使用部分模块。

例如，我只想使用响应式处理，在 Vue3 中只需要引入 reactive 模块就可以了。而在 Vue2 中需要引入完整的 Vue，其实是不合理的，因为Vue中的其它功能我们都用不到；

Vue3 将每个模块进行拆分，模块之间耦合度低，所以我们可以独立使用。

② Vue3 除了拆分模块之外，还对所有的 API 进行重写。

都采用函数式编程，使得 Vue3 支持更好的 Tree Shaking，精确地实现了按需引入，减少了打包体积。 

相比 Vue2，Vue3 整体体积变小了，除了移出一些不常用的 API，最重要的是Tree shanking。任何一个函数，如 ref、reactived、computed 等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。

源码体积优化：移除了一些非必要的特性，如 filter，一些新增的模块也将会被按需引入，减小了打包体积。

打包优化：更强的 Tree Shaking，可以过滤不使用的模块，没有使用到的组件，比如过渡（transition）组件，则打包时不会包含它。

而在 Vue2 中很多方法都是直接挂载在实例上，导致没有使用也会被打包 (还有很多组件也是一样)。 

③ Vue3 允许自定义渲染器，扩展能力强。

不会发生以前的事情，改写 Vue 源码改造染方式。扩展更方便

④ Vue3 模板编译优化，采用 PatchFlags 优化动态节点，采用 BlockTree 进行靶向更新等

希望将递归遍历树的方式，改成扁平化的方式，比如说只比较两棵树可能会发生变化的部分， 所以 Vue 3 对模板编译进行优化。

编译优化：重写了虚拟 DOM，提升了渲染速度。diff 时静态节点会被直接跳过。  

PatchFlags 记录静态节点，BlockTree 记录动态节点

① Vue3 在性能上的提升主要体现在对响应式处理上。

在 Vue2 的时候使用 ES5 的 defineProperty 来进行数据的劫持

性能差的原因是需要递归的对所有的属性进行拦截，重写 getter 函数和 setter 函数。而且它还监听不到属性的删除和新增。

还有很多情况下是监听不到的，因为 defineProperty 只能劫持已有的属性，对于新增属性和删除属性是拦截不到的，必须额外通过 $set、 $delete 这些 API 来手动触发页面的更新，无疑也是给开发者增加负担。

Vue2 中，数组不采用 defineProperty 来进行劫持 (因为对所有索引进行劫持会造成性能浪费)，需要对数组单独进行处理。

同时无法监控到数组的长度的变化，同样也是需要使用 $set 来处理。

而 Vue3 使用 ES6 的 proxy 代理的方式重写了响应式系统。

因为 proxy 可以对整个对象进行监听，所以不需要深度遍历。 

它不需要对所有属性重写 getter 和 setter，还能监听到属性的删除和新增，而且还兼容了对数组的处理，在内部实现上进行了大量的优化，使得渲染速度更快，内存占用更少

包括ES6中的 新增的 set 和 map 也支持了。

② Vue3 对 Diff 算法也进行了重写

Vue3 在 diff 算法中相比 Vue2 增加了静态标记，其作用是为了会发生变化的地方添加一个 flag 标记，下次发生变化的时候直接找该地方进行比较。 

采用同序列比对，和最长递归子序列的算法，来计算出最小的修改偏移量。

相比 Vue2 来说，Vue3 引入这种算法之后，会有一些性能的提升。

③ 静态提升

Vue3 中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。

免去了重复的创建操作，优化内存。

④ 事件监听缓存

默认情况下绑定事件行为会被视为动态绑定（没开启事件监听器缓存），所以每次都会去追踪它的变化。开启事件侦听器缓存后，没有了静态标记。也就是说下次 diff 算法的时候直接使用。

⑤ SSR优化

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

Vue3 引入了 Composition 组合式 APl，相比于 Vue2 的 Options 选项式 API ，有2个优点；

第一：使用组合式 API 可以将同一逻辑功能代码写在同一片区域，而不是分散在各个API中，提高了代码的可读性和可维护性；

允许开发者更灵活地组织和重用组件逻辑。它使用函数而不是选项对象来组织组件的代码，使得代码更具可读性和维护性。

第二个：它支持将可复用的逻辑代码封装为特定功能函数，方便相同逻辑的复用，提高代码的可复用性。

将代码组织处理为特定功能的函数，使得组件之间逻辑的提取和重用变得更加简单

其他区别： 

① 不推荐再使用 this 变量

② 不再使用2.x 中的 beforeCreate 和 created 生命周期

有兼容到其他生命周期，但是不建议和 3.x 的生命周期混用

③ 新增两个新的钩子函数

④ vue-router 4.x

在配置路由的时候，不会在默认路径下添加“/”，默认路径变成了空，必须用 redirect 属性指定对应的组件

⑤ 移除一些 API 和特性

Mixin 不再推荐，filters 已经遗弃；

不常用的 API：如过渡相关 API，部分修饰符等；

移除.sync；

⑥ 多根组件。

可以直接在 template 中使用多个根级别的元素，而不需要额外的包装元素。

这样更方便地组织组件的结构。

⑦ 新的自定义渲染 API

Vue3 的自定义渲染 API 允许开发者在细粒度上控制组件渲染行为，包括自定义渲染器、组件事件和生命周期等。

⑧ 改进的 Vue CLI

Vue3 使用了改进的 Vue CLI，可以更加灵活地配置项目，同时支持 Vue2.x 项目升级到Vue3

① Vue3 支持更多的特性，如片段、Teleport 、suspence 等。

引入了 Teleport（传送）：可以将组件的内容渲染到指定 DOM 节点的新特性。一般用于创建全局弹窗和对话框等组件。

新的API：Vue3 使用 createApp 方法来创建应用程序实例，并有新的组件注册和调用方法。

emits属性：Vue3 的组件可以使用 emits 属性来声明事件。

新增了异步组件的写法：

② 支持 vite 打包工具，使得打包速度更快

③ Vue3 对 TypeScript 的支持更加友好，提供了完整的类型定义

Vue3 完全支持 TypeScript，在编写 Vue 应用程序时可以更方便地利用 TS 的类型检查和自动补全功能。

总的来说，Vue3 在性能、可维护性和特性上都有所提升。但是我们在开发中需要注意的是，由于 API 发生了较大的变化，因此 Vue3 与 Vue2 之间并不完全兼容，需要进行相应的迁移工作。