24年再回忆Vue2和Vue3的区别

菜鸡爱上编程

已于 2024-10-25 17:30:54 修改

阅读量962

点赞数 12

分类专栏： vue学习笔记文章标签： 1024程序员节前端 vue

于 2024-10-24 23:59:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43205326/article/details/143222909

版权

vue学习笔记专栏收录该内容

10 篇文章

订阅专栏

前言

相信很多小伙伴在面试的时候都会被问到 Vue 2 和 Vue 3 的区别，但是大部分人都只能对原理进行一些对比，或者用法进行对比，但是很难从各个方面去剖析这个问题。而vue3正式版已经发布四年左右，当时对此的期待和探索你还记得吗。今天来重温一下vue2和vue3的区别。
打算从这几个角度作比对：原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持这 8 个方面去做对比。

一、原理

原理主要说一下数据响应式上的区别，这也是最核心的区别

Vue.js 2 的响应式：
Object.defineProperty：
Vue.js 2 使用 Object.defineProperty 来监听对象的属性访问和修改。当一个对象被传递给Vue实例的 data 选项时，Vue 会遍历对象的每个属性，并使用 Object.defineProperty 将其转换为"响应式"的属性。这样一来，当数据发生变化时，Vue 就能捕获到变化，并触发视图的更新。
依赖追踪：在 Vue.js 2 中，每当视图（模板）访问一个响应式对象的属性时，Vue 会在背后建立起一个依赖关系。这样，当属性发生改变时，Vue就能够找到对应的依赖，进而更新相关的视图。
数组变异方法：由于 Object.defineProperty 只能监听对象的属性访问和修改，Vue.js 2 对于数组的响应式处理需要特殊处理。Vue.js 2 通过重写了数组的原型方法，如 push、pop、splice等，使得这些方法在被调用时能够触发视图的更新。
Vue.js 3的响应式：
ES6 Proxy：
Vue.js 3 采用了 ES6 的 Proxy 代理，这是 JavaScript 的一种新特性。Proxy 可以拦截并重定义对象上的操作，使得可以监听到对象的任何属性的访问和修改。
依赖追踪优化： Vue.js 3 在依赖追踪方面进行了优化，将其与 Proxy 相结合，从而更高效地进行数据追踪和更新。这也使得在 Vue.js 3 中，对数组的处理更加自然，无需像 Vue.js 2 一样重写数组的原型方法。

二、语法

Options API：对象属性写法。
Composition API支持： Vue.js 3 的 Composition API 使得对数据的处理更加灵活，可以更好地组织组件逻辑，并减少了在大型应用中的数据追踪和管理的复杂性。

三、生命周期

生命周期主要区别是 Vue3 合并了一些钩子,同时新增了几个钩子,并通过组合式 API 让用户获得更多自定义钩子的灵活性。这些改变使得生命周期之间的关联更加清晰,也给用户提供了更好的逻辑组织方式。
下面是一个比较列表：

                Vue2          | Vue3            | Vue2        | Vue3
创建阶段：       beforeCreate  | setup           | created     |
挂载阶段：       beforeMount   | onBeforeMount   | mounted     | onMounted
运行阶段：       beforeUpdate  | onBeforeUpdate  | updated     | onUpdated
销毁阶段：       beforeDestory | onBeforeUnmount | destoryed   | onUnmounted
keepAlive相关:  activeted     |  onActiveted    | deactiveted | onDeactiveted
Vue3特有：onRenderTracked（Dev only）onRenderTriggered （Dev only）onServerPrefetch （SSR only）

四、性能

数据监听机制Vue2：通过Object.defineProperty()进行数据劫持，需要遍历所有属性，存在一定性能开销。Vue3：使用Proxy代理数据，直接监听对象，减少遍历属性时间，性能更好。
编译优化Vue3：对编译过程进行了优化，包括静态节点提升和缓存事件处理函数等，使启动速度比 Vue2 快 10-100 倍。
包体积Vue3：移除了一些不常用的 API，并优化了 Tree-Shaking，使打包体积相比 Vue2 小 10% 左右。
内存占用Vue3：移除了一些内存占用高的功能，同时优化了部分内存分配，降低内存消耗。
SSR 优化Vue3：使用异步 SSR，大大减少主线程执行代码量，提升服务器端渲染性能。Vue3 在初始化、渲染、内存占用等多个方面对 Vue2 有显著性能提升，使得 Vue3 可以承载更复杂的应用场景。
模块化Vue3源码实现了高度的 ESM 模块化，更好地支持 Tree-shaking、懒加载等能力。
Vue3内置支持了 Fragment、Teleport、Suspense 等新特性。

五、编码方式

Options API 和 Composition API
Vue2：通过 Options API 进行编码，逻辑分散，不便于重用。
Vue3：引入 Composition API，基于函数式编程，代码更聚合。
definingComponent
Vue3：通过 definingComponent API 定义组件，语法更清晰。
Ref 和 ReactiveVue3
通过 Ref 和 Reactive API 声明响应式变量，语法更简洁。
setup
Vue3通过 setup 函数统一声明逻辑。Vue2 逻辑分散在多个选项中。
异步组件Vue3
直接支持返回 Promise 的异步组件。
移除过滤器 (filter)Vue2：可以使用 filter 对数据进行转换后显示。Vue3：移除了 filter，推荐使用方法或计算属性代替。
全局和内实例 API 调整Vue3：删除了一些不常用的全局和内实例 API，并做了功能调整，如$on改为app.config.globalProperties。
源码级 APIVue3：暴露了部分源码 API 用于扩展，如createRenderer。

六、Diff

静态标记Vue2：通过标记静态根节点，跳过对这部分的 Diff。Vue3：使用 Shape Flags 更精确地标记静态根，提高 Diff 效率。
优化逻辑Vue2：使用经典的双指针（双端比较）的 Diff 算法。Vue3：采用更加高效的单端比较的 Diff 算法，每个 VNode 都有一个唯一的标识。
分块对比Vue3：支持对相邻重复节点进行分块比较，减少冗余 Diff，如列表中连续相同文本节点进行合并比较。
异步渲染Vue3：支持组件异步渲染，等待组件完成再进行 Diff，避免无效对比，提高性能。
代码减少Vue3：对核心 Diff 逻辑进行了裁剪，移除了冗余代码，优化后代码量减少超过 40%。
SSR DiffVue3：新增了 SSR 环境下的 Diff 优化模式，避免不必要的客户端对比，加快渲染速度。

七、打包构建对比

打包体积Vue3：移除了一些不常用的 API，同时优化了 Tree-shaking，与 Vue2 相比，打包后体积减小约 10%。
依赖优化Vue3：对依赖进行了优化，裁剪不必要代码，减少冗余。
构建速度Vue3：改进了编译过程，提高了构建速度，特别是 prod 模式下打包速度明显加快。
编译优化Vue3：改用优化的自动化持久缓存，加速增量编译，配合新语法提升热重载速度。
Tree-shakingVue3：编译支持更精确的 Tree-shaking，删除无用代码，如自动 Tree-shaking 样式表。

八、TypeScript 支持

内部实现Vue2：源码是 JavaScript 编写，需要手动维护类型定义。Vue3：源码直接采用 TypeScript 重写，类型信息内置。
组件定义Vue2：使用.vue文件，需要额外的vue-class-component decorators。Vue3：可以直接以类的形式定义组件，更纯粹的 TS 体验。
Options APIVue2：Options API 缺乏类型推导。Vue3：增强了对 Options API 的类型推导。
Composition APIVue3：Composition API 全面采用泛型、接口等 TS 新语法，提供完整的类型支持。
引用注册Vue3：改用统一的defineComponent方法注册组件，提供完整的 Props 检验和 IDE 提示。
TS 配置Vue3：优化了tsconfig.json，提供更严谨的 TS 类型检查。
内置工具类型Vue3：导出了部分内置工具的 TS 类型，增强扩展性。

总结

总的来说Vue3 对 Vue2 进行了全方位的升级：
性能：Vue3 在初始化速度和渲染效率上有显著提高。
功能：Vue3 添加了 Composition API、Fragment、Teleport 等前沿特性。
架构：Vue3 使用 TypeScript 重写，整体架构更加清晰优雅。
API：废弃了一些 API，新增了组合式 API，提高了开发效率。
组织：推荐函数式编程和 hooks，使代码逻辑更加聚合。
构建：改进了编译和 Tree-shaking，使打包速度和体积都得到优化。
生态：Vue3 的升级将促进相关工具链的进一步完善。