去年接手一个后台管理系统，项目技术选型时团队纠结了很久。实例React还是项目Vue？最终拍板Vue，理由很实在：上手快，实例文档友好，项目招人成本低。实例项目上线后跑了半年，项目迭代了十几个版本，实例我想聊聊真实感受。项目

项目用的实例是Vue 3 + Vite + Pinia + Element Plus这套组合。之前用Webpack构建，项目冷启动要等四十多秒，实例换成Vite之后基本三秒内就能跑起来。项目热更新速度差距更明显，实例改一行样式，项目浏览器几乎同步刷新。开发体验提升不是一点半点。

组件拆分这件事，踩过坑才有体会

刚开始写页面，一个文件塞了八百多行。模板、逻辑、样式全搅在一起，改个按钮颜色得翻半天。后来强制自己按功能拆，搜索栏一个组件、表格一个组件、弹窗表单一个组件。拆完之后单文件控制在两百行以内，维护起来舒服多了。

但拆太细也有问题。有个页面拆出了十二个子组件，props和emit层层传递，改一个字段要动五六个文件。后来用provide/inject优化了一部分，跨层级通信才没那么痛苦。经验是：拆组件看复用性和逻辑独立性，别为了拆而拆。

状态管理，Pinia确实比Vuex顺手

Vuex的mutation、action、module概念太多，新人上手容易懵。Pinia去掉了mutation，直接改state，代码量少了将近三分之一。TypeScript支持也更好，定义store的时候类型自动推导，编辑器提示很准确。

项目里用户信息、权限列表、全局配置这些跨页面共享的数据都放在Pinia里。有个细节：刷新页面后store会重置，得配合sessionStorage做持久化。写了个简单的插件，订阅store变化自动存，初始化时读回来，十几行代码搞定。

性能优化，别等出问题才动手

表格数据超过五百条就开始卡。排查后发现是每次渲染都重新计算，加了个computed缓存，情况好转。路由懒加载也是必须的，首屏只加载当前页面代码，其他路由的chunk等跳转时再请求。打包体积从2.3MB降到了800KB左右。

图片懒加载用的Intersection Observer，没引第三方库。列表页的长列表加了虚拟滚动，只渲染可视区域的DOM节点。这些优化做完， Lighthouse性能评分从52提到了87。

一些真实感受

Vue的模板语法对后端转前端的同事很友好，指令一看就懂。但灵活性确实不如JSX，有些复杂逻辑写起来会绕。Composition API解决了逻辑复用的问题，不过对新手来说，ref和reactive的区别得花点时间理解。

生态方面，Element Plus够用但不算精致，有些组件样式需要自己覆盖。Pinia、Vue Router、Vite都是官方维护，版本兼容性省心。社区活跃度也高，遇到问题搜一下基本能找到答案。

这个项目现在稳定运行，日均PV两万左右。Vue不是银弹，但在这个场景下，它让团队把精力放在了业务逻辑上，而不是跟框架较劲。选型没有绝对对错，适合团队当下阶段的就是好选择。

(责任编辑：时尚)