Vue 3 相比 Vue 2 的变化

1.双向绑定方式变化

• Vue2：Object.defineProperty()
• Vue3：Proxy

原因：definedProperty 无法监听到对象属性的新增；Proxy 可以监听到对象属性的新增，且支持监听 ES6 新增的数据类型 Symbol、Set、Map。

2.diff算法

• Vue2：双端diff算法，四个指针分别放到old子节点和new子节点的头和尾。
• Vue3：快速 diff算法，借鉴了字符串diff的一些思路，先处理新旧两组子节点中相同的前置节点和相同的后置节点，使用四个指针，构建最长递增子序列

原因：尽可能复用了原来的顺序，减少移动次数，提升了性能

3.性能优化

• Vue2：js 实现
• Vue3：使用TS 重构

原因：Vue 3 从底层重写，使用 TypeScript 编写，使得 Vue 对 TypeScript 的支持更加完善和自然。虚拟 DOM 进行了重新设计，组件的初始化过程更加高效，特别是在大量小组件的场景下，渲染性能有了显著提升。编译器通过静态分析模板，能够标记静态节点，避免每次渲染时重复创建不变的节点。这样减少了虚拟 DOM 的不必要比对，显著提高了渲染性能。 支持更加灵活的 Tree Shaking，允许只引入项目中实际使用的功能，减少打包后的体积。允许组件模板中有多个根节点（Fragments）。这不仅简化了模板结构，还减少了不必要的 DOM 元素。

4.组合式 API

• Vue2：选项式API
• Vue3：组合式API+选项式API

组合式API：是Vue3中引入的新特性，旨在提供更强大和灵活的组件组合能力。它通过setup()函数来定义组件的逻辑。在setup()函数中，可以使用诸如ref、reactive、watch等函数，以及其他响应式函数和生命周期钩子函数，来处理组件的状态、副作用和行为。组合式API使得逻辑代码可以按照功能组织，提供了更好的可重用性和可测试性。 选项式API：是Vue2中使用的传统API风格，也是Vue.js的默认API风格。在选项式API中，组件的行为通过在组件选项对象中定义各种选项来描述，例如data、methods、computed、watch、created等。选项式API的优势在于简单明了，适用于构建简单的组件和快速原型开发。

5. 新的生命周期

• Vue2： 创建（creation）、挂载（mounting）、更新（updating）和销毁（destroying）
• Vue3： setup，onMounted、onUpdated 和 onUnmounted，新增：onErrorCaptured，onRenderTracked，onRenderTriggered，onActivated，onDeactivated，onServerPrefetch

提供了一些错误捕捉机制，还有 keepAlive 的生命周期和 SSR 生命周期的支持

6. 新增组件

• Teleport：将其插槽内容渲染到 DOM 中的另一个位置。
• Suspense（异步组件）：用于协调对组件树中嵌套的异步依赖的处理。

7. 多个根节点支持（Fragments）

Vue 3 支持在组件中使用多个根节点，这解决了 Vue 2 中必须使用单一根节点的限制，使得组件模板更灵活。