前端框架版本对比手册

01Vue 2 vs Vue 3

Vue 3 不是「Vue 2 加几个 API」，而是一次从响应式内核到编译策略的重写。理解两版差异的核心切入点是响应式原理与组件代码组织方式，其余破坏性变更大多围绕这两点展开。Vue 3 于 2020 年 9 月正式发布，Vue 2 已于 2023 年 12 月 31 日停止维护，新建项目应直接使用 Vue 3（推荐 <script setup> 写法）。

响应式原理：Object.defineProperty vs Proxy

Vue 2 用 Object.defineProperty 给对象的每个属性逐一劫持 getter/setter；Vue 3 改用 ES6 Proxy 代理整个对象。这是两版最根本的差别，直接决定了「新增属性」「数组索引修改」「Map/Set」等场景是否响应式。详见 Proxy 与 Reflect 词条。

组合式 API（Composition API）

Vue 2 的选项式 API（Options API）按 data、methods、computed 分组组织代码，同一业务逻辑被拆散到各选项；Vue 3 引入组合式 API，把同一逻辑关注点的状态、方法、计算属性聚拢到一个函数里，大组件的可维护性显著改善。详见 组合式 API。

最小代码示例：同一计数器组件的两种写法

<!-- Vue 2：选项式 API -->
<script>
export default {
  data() { return { count: 0 } },
  computed: { double() { return this.count * 2 } },
  methods: { add() { this.count++ } },
  mounted() { console.log('mounted') }
}
</script>

<!-- Vue 3：<script setup> 组合式 API -->
<script setup>
import { ref, computed, onMounted } from 'vue'
const count = ref(0)                 // 响应式状态
const double = computed(() => count.value * 2)
function add() { count.value++ }
onMounted(() => console.log('mounted'))
</script>

Fragment、Teleport 与 Suspense

Vue 2 模板强制单一根节点，弹窗与异步组件都要写 hack；Vue 3 从编译器层面原生支持这三个能力。

生命周期映射

组合式 API 中，选项式生命周期改为以 on 开头的导入函数，并在 生命周期文档中给出了一一映射：

TypeScript 支持

打包体积与性能

02Webpack vs Vite

两者解决的都是「把源码变成浏览器可运行的产物」的问题，但路线相反：Webpack 是编译时打包——启动即把所有模块编译成一个 bundle；Vite 是运行时按需编译——开发期用浏览器原生 ESM，请求哪个模块才编译哪个。详见 Webpack 与 Vite 词条。

构建原理与冷启动速度

配置复杂度与生态

生产构建

最小代码示例：同一项目的构建配置对比

// webpack.config.js（Vue 2 时代常见形态，约 40~80 行起步）
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.js$/,  loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
    ]
  },
  devServer: { hot: true, port: 8080 }
};

// vite.config.js（等价能力，通常 5~10 行）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  server: { port: 5173 }
  // CSS、静态资源、 TS、 HMR 全部内置，无需配置 
})

03Tailwind CSS vs 原生 CSS

这不是「框架 vs 无框架」的选择，而是两种 CSS 组织哲学：原子化（utility-first，把样式拆成单用途类）vs 语义化（类名表达业务含义，样式集中在样式表）。Tailwind v3 的 JIT 引擎与 v4 的 Lightning CSS 架构已把「包体积」痛点基本消除。详见 Tailwind 与 原子化 CSS 词条。

最小代码示例：同一个按钮的两种写法

<!-- Tailwind：原子类直接写 -->
<button class="bg-blue-600 text-white font-medium px-4 py-2 rounded-lg
                   hover:bg-blue-700 dark:bg-blue-500 transition-colors">
  提交
</button>

<!-- 原生 CSS：语义类 + 样式表 -->
<button class="btn-primary">提交</button>

/* styles.css */
.btn-primary {
  background: #2563eb; color: #fff; font-weight: 500;
  padding: .5rem 1rem; border-radius: .5rem;
  transition: background .15s;
}
.btn-primary:hover { background: #1d4ed8; }
@media (prefers-color-scheme: dark) {
  .btn-primary { background: #3b82f6; }
}

04迁移清单

从 Vue 2 升级 Vue 3

• 评估与准备：确认无 IE 11 需求；梳理依赖（UI 库、插件）是否有 Vue 3 版本；阅读 Vue2 迁移 Vue3 与官方迁移指南
• 升级到 Vue 2.7 作为跳板：获得组合式 API、<script setup>、CSS v-bind，提前改造组件写法
• 全局 API：new Vue() 改为 createApp(App)；插件注册从 Vue.use 改为 app.use；原型挂载从 Vue.prototype 改为 app.config.globalProperties
• v-model：value + input 事件改为 modelValue + update:modelValue；组件支持多个 v-model（v-model:title 等）
• 移除过滤器（filters）：改为计算属性或组合式函数；事件总线（new Vue() 作为 bus）改为 mitt 或状态管理
• template refs：this.$refs 改为函数式 ref 或 onMounted 内读取
• 过渡类名 v-enter 改为 v-enter-from；异步组件改用 defineAsyncComponent
• 选项式生命周期改名：beforeDestroy → onBeforeUnmount；destroyed → onUnmounted（组合式 API 下）
• 响应式改造：Vue.set / Vue.delete 删除，直接赋值；数组索引修改、Map/Set 天然响应式
• 状态管理：Vuex 迁移到 Pinia（更简单的 API + 完整 TS 支持）
• 路由与 UI 库：vue-router 升级 4.x；element-ui 换 element-plus；其他组件库确认 Vue 3 分支
• 构建工具：Vue CLI（Webpack）换 create-vue（Vite）；必要时用 @vue/compat 兼容构建运行旧代码，按控制台警告逐条改
• 回归与上线：开启严格 TS 检查（如已迁移 lang="ts"）；借 Vue DevTools 验证依赖追踪；按模块灰度

从 Webpack 换 Vite

• 评估可行性：检查依赖的特殊 loader（如 Module Federation、自定义 loader、dll 优化）是否有 Vite 对应方案
• 脚手架对齐：用 create-vue / vite init 或在现有仓库安装 vite + 对应框架插件（@vitejs/plugin-vue / @vitejs/plugin-react）
• index.html 移到项目根目录，并加入 <script type="module" src="/src/main.js">（Vite 以 index.html 为入口）
• 环境变量：process.env.XXX 改为 import.meta.env.VITE_XXX，并迁移 .env 前缀约定
• 静态资源：webpack 的 publicPath / url-loader 限额改为 Vite 的 assetsInclude 与自动资源处理；require() 图片改为 import
• CSS：postcss-loader / sass-loader 等改为 vite 内置（配置 css.preprocessorOptions）；CSS Modules 需加 .module 后缀
• 别名：resolve.alias 迁移到 config.resolve.alias；扩展名省略策略调整（Vite 不建议省略 .js）
• 全局 / 环境注入：DefinePlugin 改为 define；ProvidePlugin 改为插件或显式导入
• 开发行为差异：CJS 依赖会被 esbuild 预构建，确认 CommonJS 包正常（常见于老旧库）；server.port、proxy 配置迁移
• 生产构建：rollupOptions 替代 splitChunks；确认 compression、chunk 命名、publicDir 静态目录符合预期
• 流水线同步：调整 CI 中的构建命令（npx vite build）；检查测试工具（Vitest / Jest）与 mock 对 ESM 的适配
• 验证与灰度：对比构建产物体积与首屏指标（Core Web Vitals），保留 Webpack 配置作为回滚兜底