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（两者通用）
```shell
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 新增）

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

#### 三、迁移与兼容性
全局 API 变化
```shell
// 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