【前端面试题-03】简单说一下 vue2和vue3的差异在哪里

Vue 2.x 和 Vue 3.x 之间存在显著的改进和差异，下面是一些主要区别：

数据绑定与响应式系统

• Vue 2 使用 Object.defineProperty 来实现基于 getter/setter 的观察者模式，对对象属性进行数据绑定。
• Vue 3 引入了 Proxy API，它提供了更强大的代理功能，可以更高效地监听对象的所有属性，包括数组的变化，无需手动调用 vm.$set，并且修复了 Vue 2 中一些限制和性能问题。

API 设计

• Vue 2 主要使用 Options API，即组件由一系列如 data、methods、computed、watch 等选项组成。
• Vue 3 引入了 Composition API，通过 setup() 函数提供了一种逻辑复用和解耦的新方式，开发者可以更自由地组织和管理组件的状态和逻辑，不受选项式的限制。

生命周期钩子

• Vue 2 的生命周期钩子如 created、beforeDestroy 等在 Vue 3 中进行了调整，大部分钩子加上了 on 前缀，如 onMounted、onBeforeUnmount 等，并且在 setup() 函数内部使用 onMounted 等对应的生命周期钩子函数。
• Vue 3 移除了 beforeCreate 和 created，因为在 setup() 中执行的代码在组件实例创建之前就已经运行。

组件结构

• Vue 2 不支持模板内的多个顶级元素（碎片），Vue 3 支持组件模板拥有多个根节点，即所谓的“Fragments”。

新特性与优化

• Vue 3 中添加了诸如 Teleport 组件等功能，允许将组件渲染到 DOM 树的任意位置。
• 性能提升：Vue 3 在首次渲染速度、更新性能、内存占用等方面均有显著优化。
• Tree-Shaking 更友好：Vue 3 的代码库经过重构，支持更好的模块拆分和按需引入，有助于减小打包体积。

工具链与构建方式

• Vue CLI 和 Vite 都支持 Vue 3，Vite 作为新型的构建工具，利用了原生 ES 模块和服务端渲染预加载等功能，提供更快的开发体验。

TypeScript 集成

• Vue 3 更全面地拥抱 TypeScript，提供了更好的类型提示和静态类型检查支持。

以上是 Vue 2 和 Vue 3 的一些主要差异，实际迁移和使用时还会遇到更多细节上的变化。Vue 3 在保持向后兼容尽可能多的 Vue 2 特性的同时，着重提升了框架的灵活性、可维护性和性能表现。