Vue 3 和 Vue 2 有哪些主要区别

---

前言

下面是 Vue 3 与 Vue 2 的主要区别与面试常问核心知识点详解，系统回答：

---

✅ 1. 响应式系统（核心变革点）🌟

Vue 2

• 使用 Object.defineProperty 实现响应式。
• 仅支持对象的属性拦截，新增/删除属性不会响应式。
• 数组方法如 push、splice 需特殊处理。

Vue 3

• 使用 Proxy 实现响应式。
• 对象、数组、Map、Set 等都能响应式监听。
• 更完整的陷阱（get/set/has/deleteProperty）提供了更强的能力。

面试重点提问：

Q：Vue 3 的响应式系统有哪些优势？
✅ 答：使用 Proxy 替代 defineProperty，支持深层对象监听、更低性能开销、支持新增/删除属性的追踪，同时可扩展至 Map/Set 等复杂结构。

---

✅ 2. Composition API vs Options API（代码组织思想变革）🌟

Vue 2 - Options API

export default {data() { return { count: 0 } },methods: {increment() { this.count++ }}
}

Vue 3 - Composition API

import { ref } from 'vue'
export default {setup() {const count = ref(0)const increment = () => count.value++return { count, increment }}
}

面试重点提问：

Q：你更喜欢 Composition API 还是 Options API？为什么？
✅ 答：Composition API 更适合复杂场景，支持逻辑复用、关注点分离（SoC），配合 hooks/composables 编写模块化代码，在多人协作和大型项目中可维护性更高。

---

✅ 3. 性能优化（编译时提升）🚀

方面	Vue 2	Vue 3
编译优化	无	静态提升、预字符串化、patch flag 等优化
渲染速度	较慢	更快，初始化速度提升 1.2x，更新提升 1.3x
打包体积	较大	支持 Tree-shaking，包更小

面试延伸：

Q：Vue 3 的编译优化手段有哪些？
✅ 答：Vue 3 编译阶段会做静态节点提升、patchFlag 标记动态节点，极大减少运行时 diff 的开销。

---

✅ 4. 类型系统重构 + 原生支持 TypeScript 🎯

Vue 2

• TS 支持较差，需配合 vue-class-component、vue-property-decorator。

Vue 3

• 整个框架用 TS 重写。
• 所有 API 都有类型提示。
• defineComponent、ref、reactive 等支持泛型、强类型推导。

面试问法：

Q：Vue 3 的 TypeScript 支持在哪些方面表现更好？
✅ 答：核心 API 全部使用 TypeScript 实现；支持类型推导、泛型约束、IDE 补全更精准，提高开发效率和代码健壮性。

---

✅ 5. 新增功能组件（支持更高级的 UI 需求）

Fragment 支持

• Vue 2：组件只能有一个根节点。
• Vue 3：支持多个根节点，解决包裹 div 的冗余问题。

Teleport

<teleport to="body"><Modal />
</teleport>

将组件内容挂载到 DOM 其他节点，非常适合做弹窗、浮层等。

Suspense

支持异步组件加载的优雅写法：

<Suspense><template #default><AsyncComponent /></template><template #fallback><Loading /></template>
</Suspense>

---

✅ 6. 生命周期钩子调整（需注意迁移）

Vue 2	Vue 3
beforeCreate	setup() 内逻辑处理
created	setup()
beforeDestroy	beforeUnmount
destroyed	unmounted

---

✅ 7. Global API 与 插件机制变化

功能	Vue 2	Vue 3
全局注册组件/指令	Vue.component()	app.component()、app.directive()
原型属性挂载	Vue.prototype.$bus = ...	app.config.globalProperties.$bus = ...
插件注册	Vue.use(plugin)	app.use(plugin)

---

✅ 8. 生态支持与过渡兼容

• Vue 3 提供 [Vue 2 的兼容构建版本（Vue 2.7）]，用于帮助团队逐步迁移。
• Vue Router、Vuex 均已支持 Vue 3（推荐使用 Pinia 代替 Vuex）。

---

🧠 面试建议总结（思路结构化）：

1. 从“响应式系统”谈设计层面重构（Proxy vs defineProperty）
2. 从“Composition API”谈模块化、逻辑复用与维护成本
3. 从“编译优化”谈运行效率和 Tree-shaking 体积控制
4. 从“TypeScript 支持”谈类型安全与大型项目适配
5. 再谈新特性如 Fragment、Teleport、Suspense 的场景
6. 最后对比全局 API 和生命周期的迁移变化

---

补充：

✅ 架构重写（源码角度）

Vue 2 是单体架构。

Vue 3 采用模块化架构（如 runtime-core、compiler-core 等），便于扩展和定制。

✅不兼容的改动（升级注意）

• 移除 filters 过滤器。
• v-model 支持多个绑定 prop（prop + event 可自定义）。
• global API 改为通过 app.config.globalProperties 注册。
• 生命周期钩子名称变化，如 beforeDestroy 改为 beforeUnmount。