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

最新推荐文章于 2025-05-07 09:01:12 发布

TE-茶叶蛋

最新推荐文章于 2025-05-07 09:01:12 发布

阅读量510

点赞数 18

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Bruce__taotao/article/details/147728167

版权

vue3 专栏收录该内容

12 篇文章

订阅专栏

前言

下面是 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)`