Vue2和Vue3区别

一、相同点

1.响应式系统（Reactive）

两者都采用 “模板 + 响应式” 的开发模式，视图自动随着状态变化而更新。
都支持双向绑定（v-model）、条件渲染（v-if/v-show）、列表渲染（v-for）等指令。

2.组件化

都以组件为最小单元，支持父子组件通信（props / $emit）。
都可以通过 slot 插槽机制实现组件内容分发和复用。

3.指令体系

Vue 2 的官方指令（v-bind、v-on、v-model、v-show、v-if、v-for……）在 Vue 3 保持一致，仅在细节上有增强。

4.生命周期钩子

大部分钩子名称保持一致：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。

转载自：

https://www.cnblogs.com/ltwlh/p/18939770