前端面试之：Vue 3 vs Vue 2的核心新增点全面对比

qq_39147931

273人浏览 · 2026-08-06 15:02:15

qq_39147931 · 2026-08-06 15:02:15 发布

前言

Vue 3 发布于 2020 年 9 月，是 Vue.js 历史上一次里程碑式的重大升级。它不仅在底层架构上进行了彻底重构，还在开发体验、性能表现和 TypeScript 支持等方面实现了质的飞跃。

本文将按照“底层架构 → 开发模式 → 功能体验”的递进逻辑，系统性地对比 Vue 3 相对于 Vue 2 的十大核心新增点，帮助你快速建立完整的认知体系。

一、响应式系统：`Object.defineProperty` → `Proxy`

这是 Vue 3 最底层的技术革新，是后续所有特性的基础。

对比维度	Vue 2	Vue 3
实现方案	`Object.defineProperty`	ES6 `Proxy`
动态属性增删	❌ 无法监听，需 `Vue.set`	✅ 自动监听
数组索引修改	❌ 存在盲区	✅ 完全支持
初始化性能	递归遍历所有属性	懒代理，按需递归

核心收益：Vue 3 的响应式系统更强大、更高效，彻底解决了 Vue 2 中对象属性新增/删除无法响应的问题，且性能更优。

二、组合式 API（Composition API）：全新的代码组织范式

这是 Vue 3 在开发体验上最具颠覆性的变化。

Vue 2（选项式 API）：代码按类型强制拆分到 data、methods、computed、watch 等不同区域，一个功能的逻辑被“肢解”到多处，维护困难。

// Vue 2：一个功能的逻辑分散在 3 个地方
export default {
  data() { return { count: 0 }; },
  methods: { add() { this.count++; } },
  mounted() { console.log('mounted'); }
}

Vue 3（组合式 API）：通过 setup() 函数，按功能/逻辑关注点将相关代码聚合在一起，内聚性更强。

// Vue 3：一个功能的逻辑全部写在一起
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0);
const add = () => count.value++;
onMounted(() => console.log('mounted'));
</script>

核心收益：逻辑聚合、易于复用（可封装为 Composables）、对 TypeScript 天然友好。

三、性能优化：更快、更轻、更高效

Vue 3 在运行时性能上做了大量工程优化：

虚拟 DOM 重写：Diff 算法全面优化，引入静态树提升和静态属性提升，编译时标记静态节点，跳过不必要的比对，渲染效率提升 30%+。
Tree-shaking 支持：采用模块化设计，未使用的功能不会被打包，核心库体积从 Vue 2 的 ~20KB 降至最小 ~10KB。

四、TypeScript 支持：从“勉强可用”到“原生深度集成”

对比维度	Vue 2	Vue 3
TS 支持方式	需借助 `vue-class-component` 等第三方库	核心库完全使用 TypeScript 重写
类型推断	有限，`this` 指向难以推导	精准、完善，IDE 智能提示满分
开发体验	较差	流畅、原生级

核心收益：Vue 3 的 TS 支持是根本性的，无需额外配置即可获得完善的类型安全体验。

五、新内置组件：`Teleport` 与 `Suspense`

组件	功能	典型场景
`Teleport`	将组件内容渲染到 DOM 任意位置，不受组件层级限制	模态框、通知、下拉菜单
`Suspense`	优雅管理异步组件的加载状态	异步组件加载时的“加载中”占位

六、模板语法：支持多根节点（Fragment）

Vue 2：强制每个组件模板只能有一个根元素，经常被迫添加无意义的包裹 <div>。

Vue 3：正式支持多根节点组件，模板中可以并列书写多个顶层元素，DOM 层级更干净。

<!-- Vue 3：多根节点写法 -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

七、全局 API：从 `new Vue()` 到 `createApp`

Vue 2：通过 new Vue() 创建根实例，全局 API（如 Vue.component）直接修改全局 Vue 对象，存在污染风险。

Vue 3：引入 createApp 创建独立应用实例，所有配置挂载到该实例上，实现应用之间的隔离。

// Vue 3
import { createApp } from 'vue';
const app = createApp(App);
app.use(router).component('MyComp', MyComp).mount('#app');

核心收益：更符合模块化设计，避免多应用/测试环境下的全局冲突。

八、`v-model` 指令：功能增强与统一

对比维度	Vue 2	Vue 3
单组件 `v-model` 数量	仅支持 1 个	支持多个（如 `v-model:title`）
与 `.sync` 的关系	各自独立	合并统一为 `v-model`
自定义修饰符	有限	支持自定义 `v-model` 修饰符

九、生命周期钩子：全面拥抱组合式 API

Vue 2（选项式）	Vue 3（组合式）	说明
`beforeCreate`	❌ 不再需要	逻辑直接写在 `setup()` 中
`created`	❌ 不再需要	逻辑直接写在 `setup()` 中
`beforeMount`	`onBeforeMount`	需手动导入
`mounted`	`onMounted`	需手动导入
`beforeUpdate`	`onBeforeUpdate`	需手动导入
`updated`	`onUpdated`	需手动导入
`beforeDestroy`	`onBeforeUnmount`	名称变更
`destroyed`	`onUnmounted`	名称变更

十、自定义渲染器：扩展性质的飞跃

Vue 3 的架构将响应式系统与虚拟 DOM 渲染器彻底解耦，提供了 createRenderer API，允许开发者将 Vue 的响应式能力渲染到任何目标平台。

典型应用：Vue 3 驱动 Weex、uni-app 等跨端框架，以及各类小程序平台。

总结对比表

序号	新增点	核心变化	主要收益
1	响应式系统	`defineProperty` → `Proxy`	更强大、更高效，支持动态增删
2	组合式 API	引入 `setup` + Composables	逻辑聚合、易复用、TS 友好
3	性能优化	虚拟 DOM 重写 + Tree-shaking	渲染更快、打包更小
4	TypeScript	核心库 TS 重写	原生支持，类型推导精准
5	Teleport / Suspense	新增内置组件	解决跨层渲染与异步加载痛点
6	多根节点	支持 Fragment	模板更简洁，无冗余包裹
7	createApp	全局 API 模块化	应用隔离，避免全局污染
8	v-model	功能增强	支持多值绑定，统一 `.sync`
9	生命周期	组合式 API 化	更灵活，与 `setup` 协同
10	自定义渲染器	渲染器可扩展	跨端能力显著增强