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() 返回值

 

---

三、迁移与兼容性

1. 全局 API 变化

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

2. 生命周期钩子命名

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

    

3. v-model 改动

   • Vue 2 只能对 value 做双向绑定。

   • Vue 3 支持多个 v-model，并可绑定自定义 prop。

4. 跨版本插件

   • 大多数 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。