Vue.js 踩坑三年，从婚礼请柬到企业后台的血泪实战
上周五晚上十点半，我还在公司改一个 Vue3 的组件样式，耳机里放着《Marry You》，一边调 CSS 一边想着下个月的婚期——没错，我就是那个白天写代码、晚上挑婚纱的备婚程序媛。在这家公司待了三年多，眼看着项目从 Vue2 升级到 Vue3，又从单体架构拆成微前端，最近还被领导“委以重任”：用 Vue 做一套全新的运营后台系统。更魔幻的是，隔壁组刚用 React 重写了整个用户中心，产品经理还时不时来问：“你们 Vue 能不能像 React 那样搞个 hooks？”
行吧，既然躲不过，那就干脆把这几年踩过的坑、熬过的夜、掉过的头发，都写出来。希望你看到这篇文章时，能少走点弯路——毕竟我下周就要去试婚纱了，实在没精力再帮同事 debug 到凌晨三点。
为什么是 Vue？不是 React？
先说清楚背景：我们团队做的是一个面向内部运营人员的后台系统，功能杂、需求变、上线急。去年双11前，运营同学突然说要加个“实时数据看板+自动预警通知”，而当时我们的老系统还是 jQuery + PHP 混搭的“古董”。技术选型会上，有人提议上 React（毕竟隔壁组用得飞起），但最后还是定了 Vue。
原因很简单：开发效率 + 团队熟悉度。
我们几个前端都是 Vue 起家，Vue 的模板语法对非纯前端出身的同事也更友好。而且 Vue 的响应式系统在处理表单、表格这类运营场景时，简直不要太顺手。反观 React，虽然生态强大，但写个简单的表单都要套三层 useState + useEffect，对于天天被运营催需求的我们来说，真的会谢。
当然，我也偷偷学过 React。最近不是在啃 AI 吗？发现很多开源模型 demo 都是 React 写的。但说实话，除非跳槽，否则短期内我们这摊子活儿还是 Vue 更合适——毕竟，谁想在婚礼前一周还要重学 JSX 和 Fiber 架构啊？
生态之痛：你以为装个 Vue 就完事了？
刚接手新项目时，我以为无非就是 vue create 走起，结果现实狠狠打了脸。Vue 虽然核心简洁，但一旦涉及真实业务，光靠官方文档根本不够。以下是我在搭建项目初期踩的几个大坑：
1. 状态管理：Pinia 还是 Vuex？
Vue3 官方主推 Pinia，说它更轻量、TypeScript 友好、没有 mutations 的繁琐流程。听起来很美，但实际用起来发现：当 store 逻辑复杂到一定程度，Pinia 的“扁平化”反而成了负担。
比如我们有个“活动配置模块”，要同时管理活动基础信息、奖品池、用户白名单、实时报名人数……这些状态相互依赖，还要支持撤销/重做。最初我用 Pinia 写，结果 actions 里塞满了副作用逻辑，调试时根本找不到数据流源头。
后来借鉴了 Redux 的思路，在 Pinia store 里手动维护一个 action history 栈，并用 $subscribe 监听状态变更。代码瞬间清爽不少：
// stores/activity.ts
export const useActivityStore = defineStore('activity', () => {
const config = ref<ActivityConfig>({})
const history: ActivityConfig[] = []
function updateField(key: string, value: any) {
history.push({ ...config.value }) // 记录历史
config.value[key] = value
}
function undo() {
if (history.length > 0) {
config.value = history.pop()!
}
}
return { config, updateField, undo }
})
经验总结：Pinia 适合中小型项目，但如果状态交互复杂，别怕“过度设计”，适当引入命令模式或状态机思想，长远看更省心。
2. 路由守卫：别让权限控制变成意大利面条
运营后台最头疼的就是权限。不同角色能看到的菜单、按钮、字段都不一样。最初我图省事，在每个路由里写 beforeEnter：
{
path: '/campaign',
component: Campaign,
beforeEnter: (to, from, next) => {
if (!hasPermission('CAMPAIGN_VIEW')) next('/403')
else next()
}
}
结果两周后，权限规则变了三次，我改得想哭。后来重构时，把权限校验抽成指令 + 全局 mixin，配合后端返回的权限码树，前端只需一行代码：
<template>
<div v-if-perm="'CAMPAIGN_EDIT'">
<el-button @click="edit">编辑</el-button>
</div>
</template>
<script setup>
// 自定义指令
const vIfPerm = {
mounted(el, binding) {
if (!checkPermission(binding.value)) el.remove()
}
}
</script>
现在产品说改权限，我喝着奶茶改个 JSON 配置就行——这才是打工人该有的生活。
性能优化：别让运营等得睡着
运营同学最常说的话是什么？“怎么又卡了？”、“上次加载只要2秒！”
我们的数据看板要渲染上千条记录，加上 ECharts 图表，首屏经常飙到 5s+。优化过程堪称炼狱：
关键招数一：虚拟滚动 + 组件懒加载
用 vue-virtual-scroller 替代原生 v-for，列表渲染从 2000ms 降到 200ms。同时，非首屏组件（比如导出弹窗、日志面板）全部动态 import：
const LogPanel = defineAsyncComponent(() =>
import('./LogPanel.vue')
)
关键招数二：防抖 + 请求合并
运营喜欢疯狂点筛选条件，导致接口被刷爆。我给所有 filter 绑定加了 300ms 防抖，还用 RxJS 的 switchMap 自动取消旧请求：
const filters$ = new Subject<Filters>()
filters$.pipe(
debounceTime(300),
switchMap(filters => fetchData(filters))
).subscribe(data => {/* 更新 */})
顺便吐槽：测试同学一开始说“防抖会导致用户操作丢失”，结果上线后他们自己都说“现在丝滑多了”——哼！
和 React 对比：我们到底差在哪？
虽然我们用了 Vue，但隔壁 React 组的成果确实亮眼。对比下来，Vue 在工程化工具链和社区创新速度上略逊一筹。比如：
| 维度 | Vue | React |
|---|---|---|
| 状态管理生态 | Pinia/Vuex，较统一 | Redux/Zustand/Jotai，百花齐放 |
| SSR 方案 | Nuxt.js 成熟但配置重 | Next.js 开箱即用，AI 集成更早 |
| 新特性跟进 | Composition API 模仿 Hooks | Hooks 原生支持，生态先行 |
| DevTools | 功能全但 UI 老旧 | React DevTools 调试体验更直观 |
但 Vue 也有自己的优势：学习曲线平缓、模板可读性强、对中文社区更友好。对于我们这种“既要快速交付又要带新人”的团队，Vue 依然是性价比之选。
最后一点真心话
写这篇文章时，我已经投了几份简历。三年了，想换个环境，也想深入学学 AI 工程化——说不定下家公司就用 React + TensorFlow.js 做智能运营系统呢？
但不管用什么框架，核心永远是：解决实际问题，而不是追逐技术潮流。Vue 或 React 从来不是银弹，真正重要的是理解业务、敬畏线上、对用户（哪怕是内部运营）负责。
哦对了，昨天终于把新后台上线了。运营主管发来消息：“这次真不卡了，给你加鸡腿！”
我回了个 😊，然后默默关掉电脑，去试我的主婚纱了。
代码可以重构，bug 可以 fix，但婚礼只有一次——所以，各位程序员朋友，记得按时下班，生活不止有 npm install，还有诗和远方（以及婚纱照）。
评论 0