Vue 2 vs Vue 3 的全方位对比文档

come11234

982人浏览 · 2025-11-20 16:46:58

come11234 · 2025-11-20 16:46:58 发布

简单来说：Vue 2 是过去式（已停止维护），Vue 3 是现在和未来的标准。

对于“小白”来说，现在学习 Vue 实际上比以前更简单，因为工具链（Vite）变快了，语法（组合式 API）也更符合逻辑。

下面我为你整理了一份Vue 2 vs Vue 3 的全方位对比文档，涵盖核心原理、构建方式和代码语法。

1. 版本现状概览 (2025年视角)

特性	Vue 2.x (经典版)	Vue 3.x (现代版/主流)
状态	已淘汰 (EOL)	主流标准 (Default)
维护情况	2023年底已彻底停止官方支持。	持续更新中 (目前稳定版为 v3.5+)。
核心原理	`Object.defineProperty` (旧技术)	`Proxy` (新技术，性能更强)
适用场景	维护 5 年前的老旧项目。	所有新项目。

小白须知：如果你是新学 Vue，请直接学习 Vue 3。除非为了找工作维护老代码，否则不需要深入钻研 Vue 2。

2. 构建方式的区别：由“重”到“轻”

这是你写代码前最直观的感受。

Vue 2 时代：Webpack (Vue CLI)

工具：通常使用 vue-cli。
体验：像“盖楼”。启动项目时，它需要把所有代码打包、编译一遍，才能在浏览器里看到页面。如果项目大，启动可能需要几十秒甚至 1 分钟。
命令：vue create my-project

Vue 3 时代：Vite (create-vue)

工具：官方推荐 create-vue (底层是 Vite)。
体验：像“闪送”。利用现代浏览器原生能力，几乎是秒开。无论项目多大，启动速度都飞快。
命令：npm create vue@latest

3. 核心语法的区别：从“填空题”到“自由写作”

这是 Vue 2 和 Vue 3 最大的区别。

Vue 2：选项式 API (Options API)

特点：像做填空题。Vue 规定了几个格子（data, methods, mounted），你必须把对应代码填进去。

优点：结构死板，适合初学者快速上手，知道代码该放哪。
缺点：当一个功能（比如“搜索功能”）很复杂时，它的代码会被拆分到 data、methods、watch 里，由于距离太远，维护起来要在文件里上下反复滚动。

Vue 3：组合式 API (Composition API) + `<script setup>`

特点：像写逻辑流。你可以把属于同一个功能（比如“搜索功能”）的所有变量、方法写在一起。

优点：逻辑高内聚，代码复用极其方便（Hooks），对 TypeScript 支持极好。
缺点：灵活性太高，如果代码组织能力差，容易写成“面条代码”。

4. 代码实战对比 (最直观)

假设我们要实现一个简单的计数器功能。

Vue 2 写法 (Options API)

你需要把数据放在 data，方法放在 methods。

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script>
export default {
  // 1. 数据必须函数返回对象
  data() {
    return {
      count: 0
    }
  },
  // 2. 方法必须定义在 methods 里
  methods: {
    increment() {
      // 3. 修改数据必须用 this
      this.count++
    }
  },
  // 4. 生命周期
  mounted() {
    console.log('组件挂载了')
  }
}
</script>

Vue 3 写法 (Composition API - `<script setup>`)

这是目前的标准写法，代码量直接减少，没有繁琐的 this。

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 1. 定义数据 (使用 ref)
const count = ref(0)

// 2. 定义方法 (直接写函数)
function increment() {
  count.value++ // 注意：在脚本中修改 ref 需要 .value
}

// 3. 生命周期
onMounted(() => {
  console.log('组件挂载了')
})
</script>

核心区别总结：

this 消失了：Vue 3 的 <script setup> 中不再需要难以理解的 this。
ref 和 reactive：Vue 3 需要显式引入响应式函数（告诉 Vue 哪个变量变了页面要刷新）。
代码组织：Vue 3 中，变量和函数是挨在一起的，不像 Vue 2 被强制分开。

5. 生态系统的区别 (周边的工具)

随着 Vue 3 的普及，周边很多库也更新换代了：

类别	Vue 2 常用	Vue 3 推荐	区别
状态管理	Vuex	Pinia	Pinia 更简单，去掉了复杂的 mutations，支持 TS 更好。
路由	Vue Router 3.x	Vue Router 4.x	语法略有变动，整体理念一致。
UI 库	Element UI	Element Plus / Naive UI	专为 Vue 3 优化，性能更好。
IDE 插件	Vetur	Volar (Vue Official)	必须换插件，Volar 对 Vue 3 的类型推断更准。

6. 为什么 Vue 3 比 Vue 2 快？(原理简述)

对于小白，只需要理解这个比喻：

Vue 2 (Object.defineProperty)：
Vue 2 就像一个尽职的保安，它会盯着你定义好的每一个数据。但是，如果你突然在一个对象里加了一个新属性（比如 user.age = 18），或者直接修改数组下标，保安是看不见的，页面就不会刷新。你需要用特殊的 $set 方法通知它。
Vue 3 (Proxy)：
Vue 3 就像给数据装了一个智能感应门（Proxy 代理）。不管你在这个对象里增删改查任何东西，只要经过这个门，Vue 都能立刻感知到，不需要任何特殊操作。性能更好，不仅能监听到对象属性的变化，还能监听到数组的变化。