Vue2和Vue3的差异化（通俗易懂）

一、相同点

响应式系统（Reactive）
- 两者都采用 "模板 + 响应式" 的开发模式，视图自动随着状态变化而更新。
- 都支持双向绑定（v-model）、条件渲染（v-if/v-show）、列表渲染（v-for）等指令。
组件化
- 都以组件为最小单元，支持父子组件通信（props / $emit）。
- 都可以通过 slot 插槽机制实现组件内容分发和复用。
指令体系
- Vue 2 的官方指令（v-bind、v-on、v-model、v-show、v-if、v-for......）在 Vue 3 保持一致，仅在细节上有增强。
生命周期钩子
- 大部分钩子名称保持一致：created / mounted / updated / destroyed（Vue 3 中改称为 beforeUnmount / unmounted）。
- 钩子触发顺序与逻辑和 Vue 2 基本相同。

二、核心不同点

维度	Vue 2	Vue 3
核心实现	基于 `Object.defineProperty`（getter/setter）	基于 ES6 `Proxy`
响应式 API	`data`、`computed`、`watch`	新增 `reactive`、`ref`、`computed`、`watch`（Composition API）
组件写法	Options API（`data`、`methods`、`computed`、`watch`...）	同时支持 Options API 和 Composition API
性能	启动慢、体积较大，大约 33KB gzip	启动更快、体积更小，大约 23KB gzip
Tree-shaking 支持	几乎不支持	完全支持，可按需打包
TypeScript 支持	社区维护的声明文件，体验一般	官方支持、原生 TS 编写，类型推导更完善
新增特性	---	Fragment、Teleport、Suspense、 `<script setup>`
全局 API	`Vue.component`、`Vue.directive`、`Vue.mixin` 等	迁移到 `app.component`、`app.directive`，并通过 `createApp` 获取 `app` 实例
生命周期钩子	`beforeDestroy`、`destroyed`	`beforeUnmount`、`unmounted`（名称更语义化）
`v-model` 语法	单一语法（`v-model="value"`）	多个 `v-model` 支持，语法改为 `v-model:propName`
异步组件	`Vue.component('async', () => import(...))`	同上，但更便捷，并支持 Suspense 包裹等待状态

1. 响应式底层

Vue 2
- 利用 Object.defineProperty 拦截属性的 getter/setter，实现依赖收集与派发更新。
- 对于新增属性或删除属性需手动用 Vue.set / Vue.delete。
Vue 3
- 改用 ES6 Proxy，可直接监听整个对象、数组的增删改，无需额外 API。
- 性能更优，内存占用更低。

2. API 设计：Options vs Composition

Options API（两者通用）

复制代码

export default {
  data() { return { count: 0 } },
  computed: { double() { return this.count * 2 } },
  methods: { increment() { this.count++ } },
  watch: { count(newVal) { console.log(newVal) } }
}

Composition API（Vue 3 新增）

复制代码

import { ref, computed, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    function increment() { count.value++ }
    watch(count, (newVal) => console.log(newVal))
    return { count, double, increment }
  }
}

优点：逻辑关注点聚合，代码更 "扁平化"，便于复用和测试。

3. 性能与打包体积

Vue 3 内部重写了虚拟 DOM、模板编译器、响应式系统，显著提升渲染性能。
原生支持 Tree-shaking，生产包体积更小、加载更快。

4. TypeScript 支持

Vue 2 的 TypeScript 支持依赖社区维护的 vue-class-component、vue-property-decorator，体验不够流畅。
Vue 3 从内核开始设计，所有 API 都带有类型声明，<script setup lang="ts"> 让组件编写更简洁，类型推导到位。

5. 新增核心特性

特性	说明
Fragment	组件可返回多个根节点，无需额外包裹元素
Teleport	将子组件渲染到 DOM 的任意位置，常用于模态框、提示框等
Suspense	异步组件加载时可展示占位内容，提升用户体验
`<script setup>`	单文件组件的简写语法，更简洁，自动推导 `setup()` 返回值

三、迁移与兼容性

全局 API 变化

复制代码

// Vue2
     Vue.component('MyComp', MyComp) 
// Vue3 import { createApp } from 'vue'
    const app = createApp(App) 
    app.component('MyComp', MyComp)

生命周期钩子命名

Vue 2	Vue 3
beforeCreate	beforeCreate
created	created
beforeMount	beforeMount
mounted	mounted
beforeUpdate	beforeUpdate
updated	updated
beforeDestroy	beforeUnmount
destroyed	unmounted

v-model 改动
- Vue 2 只能对 value 做双向绑定。
- Vue 3 支持多个 v-model，并可绑定自定义 prop。
跨版本插件
- 大多数 Vue 2 插件在 Vue 3 下需升级才能兼容，Vue 3 官方提供兼容构建版本.
- 推荐逐渐迁移业务逻辑到 Composition API，再切换核心库版本。

四、总结

相同点：核心思想不变，模板+组件+响应式，指令体系、生命周期钩子保留。
不同点：Vue 3 在响应式底层（Proxy）、API（Composition）、性能、体积、Tree‑shaking、TypeScript 支持及新特性上都有重大改进。

对于新项目，推荐直接使用 Vue 3，享受更好性能和更现代的开发体验；对于已有 Vue 2 项目，则可以先引入 Vue 3 的 Composition API 插件，逐步重构业务逻辑，再升级到 Vue 3。