Vue3入门到项目实战

一、从“改个页面”开始的Vue3初体验

刚接触Vue3的时候，我并没有想着要学多深，只是因为老板一句“这个页面下周上线，你顺手用新框架改一下”。项目原本是Vue2写的，组件里data满天飞，父子传值靠事件硬怼，改个字段要担心会不会影响别的地方。抱着“先跑起来再说”的心态，我把Vue3加了进去，最先感知到的，是不用再写Object.defineProperty那一套“玄学”了，代码像被清空了缓存，跑起来轻快了不少。一个简单的计数器，从原来的十几行缩到五六行，模板里直接{{ count }}，逻辑丢进setup，页面马上有反应。那一刻我意识到：Vue3不是换个写法，而是让“写代码”这件事变回写代码，而不是在和框架斗智斗勇。

二、组合式API不是炫技，是把逻辑“摆上台面”

很多人一听到组合式API就头大，觉得是Vue在逼着人学新概念。其实换个场景就好理解了：以前像是把调料全塞进抽屉，想用的时候得翻半天；组合式API则是把盐、糖、酱油一个个摆在桌上，要什么拿什么，还能看清谁和谁有关系。举个真实的例子，项目里有一个“用户资料+权限开关+数据校验”的页面，Vue2时代我习惯用mixin，结果后来排查bug像在走迷宫——不知道哪个文件改了isAdmin。换到Vue3，我把用户信息、权限判断、校验规则分别写成useUser、usePermission、useFormCheck，页面里const { user, loadUser } = useUser()一解构，逻辑边界一下就清晰了。测试时单独对usePermission开个单元测试，不再需要把整个页面跑起来。这种“把逻辑拆开、摆在明面上”的方式，让团队协作时少了很多“我以为你改了”的误会。

三、响应式从“看不见的手”变成“看得见的规则”

Vue2的响应式有时候像魔术：数据改了，视图跟着变，但不知道为什么没变，就得祭出this.$set或者this.$forceUpdate。Vue3把这一切摊开来讲规则——核心是reactive和ref，底层靠Proxy拦截变化。刚开始我总搞混什么时候用ref什么时候用reactive，后来总结出一条笨办法：基本类型用`ref`，对象结构用`reactive`。比如一个表单对象，用`reactive({ name: '', email: '' })`，输入框一绑，改动立刻感知；而一个开关状态用`ref(false)`，模板里`.value`只在脚本里出现，模板中自动解包，用起来并不累。更有意思的是`watch`和`watchEffect`的区别慢慢浮现：我想监听某个字段做接口请求，用`watch`明确指定依赖；我想在任意相关数据变化时统一刷新局部状态，用watchEffect`更省事。这种“规则清晰”的感觉，让排查问题时我能快速定位到“是不是响应式断了”，而不是怀疑人生。

四、从单文件到工程化，项目实战里学到的分寸感

真正把Vue3放进项目，才发现“会用组件”和“项目能跑下去”是两回事。路由、状态管理、请求封装、构建优化，桩桩件件都在教人什么是“分寸”。比如状态管理，刚开始我一股脑把接口数据都塞进store，结果状态膨胀得难以维护。后来学乖了：UI状态放store，业务数据尽量贴近组件，用composable封装，按需共享。路由也是，嵌套层级一深，懒加载和路由守卫没规划好，首屏就像背着沙袋跑步。一次项目上线前，我把所有非首屏页面改成() => import()，配合Vite的按需编译，首屏时间肉眼可见地掉了下来。更重要的是团队约定：组件命名、Props类型标注、事件命名统一用update:xxx，看似小事，却让联调时少了很多“字段对不上”的扯皮。Vue3没有替我们做决定，但它提供了一条能把决定落地的主线。

五、结语

从“顺手改个页面”到“用Vue3跑完整项目”，这个过程更像是在学怎么“和框架合作”，而不是“学框架”。组合式API让我敢于把复杂逻辑拆细，响应式系统让我敢于相信数据变化会如实反映到界面上，工程化实践让我学会在性能和可维护性之间找平衡。Vue3并不完美，学习曲线也真实存在，但当团队里新人能快速看懂业务逻辑、老成员不再被“这个怎么没更新”折磨时，你会觉得这些折腾都值得。技术终究是为人服务的，框架再好，也不如写出来的项目稳一点、快一点、清楚一点。如果你在犹豫要不要从Vue2跨过去，我的建议很简单：挑一个小页面先跑起来，把计数器换成组合式写法，感受一次“改完就生效”的顺畅——很多时候，迈出第一步，比选对完美的路更重要。