前言Vue.js 是一个流行的前端JavaScript框架由尤雨溪Evan You创建旨在通过简化数据绑定和组件化视图层构建提高开发效率和性能。Vue.js 自 2014 年首次发布以来经历了几个重要的发展阶段特别是在 Vue 2 和 Vue 3 之间。随着2023年末vue官方宣布vue2日后不在更新vue3将成为日后开发框架的新首选项。以下是对这Vue 2 和 Vue 3两个版本的区别的一些概述区别正文1. 代码组成方式Vue 2使用Options API选项式 API将组件逻辑拆分到预定义的选项中为开发者规定了 data状态、methods方法、computed计算属性、watch监听、created生命周期等固定选项开发者只需按功能类型将代码填入对应选项Vue 会自动整合构建组件实例。Vue 3引入Composition API组合式 API将相关联的逻辑状态方法计算属性监听聚合为独立的功能模块。它以 setup 函数或 setup 语法糖为入口允许开发者自由组合 ref/reactive响应式状态、computed计算属性、watch监听等 API将分散在 Options 中的逻辑按“功能维度”整合。2. 生命周期Vue3 的组合式 APIComposition API和 Vue2 的选项式 APIOptions API在生命周期的命名和使用上有些不同。命名变化beforeDestroy 和 destroyed 在 Vue3 中分别更名为beforeUnmount和unmounted。这个命名更符合组件挂载/卸载的语义。使用变化在 Vue3 中如果使用 setup 方法生命周期钩子需要以前缀on的形式导入并使用。对应关系如下vue2vue3名称含义beforeCreate()不再需要 setup组件开始创建数据实例之前created()不再需要setup组件实例完成beforeMount()onBeforeAMount()DOM挂载之前beforeMount()onMounted()DOM挂载完成beforeUpdate()onBeforeUpdate()组件更新之前undated()onUpdated()组件更新之后beforeDestroy()onBeforeunmount()组件销毁之前destroyed()onUnmounted()组件销毁之后注意setup 函数本身执行在 beforeCreate 和 created 之前所以原来在这两个钩子中写的代码可以直接写在 setup 里。3. 数据绑定实现原理Vue2通过Object.defineProperty会对响应式对象进行递归遍历对每个属性进行劫持再使用get或set方法对属性进行读取或者修改Vue3使用Proxy替代了 Object.defineProperty可以拦截和代理对象的多种操作如 get、set、deleteProperty 等。也因为 Proxy 代理的是整个对象而不是对象的特定属性。因此无论是新增属性还是删除属性或者是通过索引访问数组都能被拦截到实现了更完整的响应式覆盖。Vue3 相比 Vue2 的实现具有更高的灵活性和性能。4. 组件/逻辑复用方式Vue2依靠Mixins一种全局特性可以在多个组件之间共享代码。由于 Mixins 是全局的容易导致命名冲突当多个 Mixin 有同名属性时来源不清晰数据和方法来自哪个 Mixin 需要溯源并且存在隐式的跨 Mixin 依赖问题会增加组件的耦合度使得代码难以维护。Vue3依靠Hooks可以将同一逻辑相关的代码如数据、方法、生命周期放在一起封装在一个自定义 Hook中形成一个逻辑单元组件内部使用的而不是全局的这减少了命名冲突和耦合度。5. 虚拟 DOM 的优化Vue2虚拟 DOM 是树级别的 diffVue3重写了虚拟 DOM增加了 静态标记。在 diff 过程中Vue3 会跳过静态节点只比较动态绑定的部分6. 性能提升a. 打包体积‌Tree Shaking 支持‌Vue 3 按模块导出构建工具可移除未使用的代码核心包体积从 Vue 2 的约 ‌20KB‌ 减至 ‌10KB‌ 左右 ‌。‌按需引入‌如ref、reactive等 API 可单独导入避免全量打包b. 渲染速度虚拟 DOM 重写‌Vue 3 引入 ‌静态标记Static Tree Hoisting‌ 和 ‌区块树Block Tree‌ 优化仅对比动态内容减少不必要的 diff 操作渲染效率提升约 ‌30%–40%‌ ‌编译器优化‌模板编译阶段识别静态节点并标记运行时无需重复创建进一步加快首次渲染和更新速度 ‌7. typescript的支持Vue2依赖 this 上下文访问数据类型推导困难需手动声明类型Vue3依赖‌组合函数Composables逻辑独立、来源清晰、支持参数传递可轻松在多个组件间复用。8. 根节点Vue2只能存在一个根节点需要用一个div来包裹Vue3支持多个根节点也就是 fragment 9. 新增Teleport SuspenseTeleport传送门组件含义把一个组件的 DOM“传送” 到页面另一个地方渲染但逻辑还留在原来的组件里。一句话DOM 走了逻辑留下。解决什么问题默认情况下子组件的 DOM 会渲染在父组件里面但有些东西必须渲染到body最外层才正常不然会被父组件的overflow:hidden、z-index干扰。使用场景模态框Modal弹出层Popup、Drawer全局提示Toast、Notify下拉菜单如何用// 写法一 teleport tobody div classmodal我会被直接渲染到 body 下/div /teleport / 写法二 teleport to#app div classmodal我会被直接渲染到 body 下/div /teleport简单示例template div classparent styleposition: relative; z-index: 1; button clickshow true打开弹窗/button !-- 弹窗会被“传送”到 body不受父组件影响 -- teleport tobody div v-ifshow classmodal 我是弹窗我在 body 最顶层 button clickshow false关闭/button /div /teleport /div /templateSuspense等待加载组件含义用来等待异步组件 / 异步 setup 执行在加载中显示 loading加载完显示内容。一句话异步没好 → 显示 fallback异步好了 → 显示真正内容。解决什么问题组件需要异步请求数据才能渲染组件是异步导入的不想自己写一堆loading判断基本结构Suspense !-- 成功后显示的内容 -- template #default AsyncComponent / /template !-- 加载中显示的内容 -- template #fallback div加载中.../div /template /Suspense内置组件总结TeleportDOM 传送专门解决弹窗、层级、溢出问题。Suspense等待异步专门解决异步组件 / 异步数据的 loading。小结其实 vue2 和 vue3 的区别有很多小编也不能全数列举面试的话如果记不住太多基本上回答前面1-7个点主要的点已经回答到了主要升级点但是如果想要更全面也可以聊聊8-9或者其他我没有列举到的点。最后面试时也可以根据实际情况分别说明 vue2 和 vue3 适用的场景如下维度Options APIComposition API‌代码组织方式‌按“选项”拆分代码将状态、方法、计算属性、生命周期钩子等强制分类到data、methods、computed、watch、created等固定选项中。按“功能”聚合代码将同一逻辑相关的状态、方法、计算属性和生命周期钩子集中在一起可自由组织甚至抽离为独立的组合函数。‌逻辑复用‌依赖mixins但存在命名冲突、来源模糊、无法传参等问题维护性差。依赖‌组合函数Composables逻辑独立、来源清晰、支持参数传递可轻松在多个组件间复用。‌响应式实现‌基于this上下文状态自动响应式语法简洁但隐式性强。基于ref()和reactive()响应式状态需显式创建和访问如count.value逻辑更透明。‌生命周期‌使用选项式钩子如mounted()绑定this。使用函数式钩子如onMounted()无this依赖更符合函数式编程风格。‌TypeScript 支持‌类型推导有限需手动声明this类型适配成本高。‌原生友好ref、reactive、组合函数等能自动推导类型开发体验更佳。‌学习曲线‌‌门槛低结构固定适合新手快速上手尤其适合简单组件或非专业开发者。‌门槛中等需理解响应式原理和函数式思维更适合有经验的开发者处理复杂逻辑。‌适用场景‌小型组件、快速原型开发、团队中有大量新手开发者。‌大型复杂组件、需要高度复用逻辑的项目、对代码可维护性和类型安全要求高的应用。最后祝大家面试顺利争取早日拿到心仪的 offer✌