1. 环境搭建与创建项目先把跑车组装好再谈上路1.1 从零初始化 Vue 项目时最容易忽略的版本问题翻看这两年记的 vue 笔记开头永远是环境配置。很多人觉得 npm create vue 敲完就完事了其实这里头坑特别多。先说 Node.js 版本——Vue 3 官方脚手架 create-vue 对应的 Vite 5 要求 Node 18如果你的机器还停留在 Node 16老老实实先升级不然装完依赖一启动就报ERR_OSSL_EVP_UNSUPPORTED这个错在旧版本上几乎是无解的。安装依赖我建议用 pnpm 而不是 npm。不光是快关键是pnpm对依赖的软链接管理方式能帮你避开很多幽灵依赖的问题。有次我帮同事排问题他npm install完了能跑清理 node_modules 重新装就报模块缺失最后发现是 package.json 里根本没声明某个插件的依赖只是 npm 扁平化的 node_modules 让它侥幸被装上了。用 pnpm 之后这种运气依赖立刻现形项目移到 CI 机器上也更稳。还有 lock 文件的问题。团队协作时一定要把pnpm-lock.yaml提交到 git不然每个人装出来的依赖版本可能都不一样排查问题的时候互相扯皮。另外部分依赖在安装时会执行 postinstall 脚本比如 esbuild 要下载二进制文件、sharp 要编译原生模块这些在网络受限时很容易失败。如果你遇到 node-gyp 或者 download 类型的报错先别急着重装看下是不是镜像源的问题把 registry 切换成国内镜像基本能解决大半。提示离线安装依赖也有办法别硬装。把 node_modules 整个目录拷到目标机器或者用pnpm store path找到缓存目录打包带走都可以在完全没有网络的情况下恢复依赖环境。我试过在隔离网络上部署 Vue 项目这招非常管用。1.2 创建项目之后必改的几个配置项脚手架生成的项目开箱能跑但离能上生产还有几步。先说 TypeScript 的allowImportingTsExtensions、verbatimModuleSyntax这类编译选项官方默认模板给的是比较保守的配置实际开发时按需调整。再就是vite.config.ts里的resolve.alias建议先把指向src目录不然写一堆../../太痛苦。环境变量这块也有讲究。.env文件里变量名必须以VITE_开头否则不会暴露给前端代码。我用过一个比较绕的场景开发环境和生产环境的接口地址不同在.env.development里写VITE_API_BASE_URL/api在.env.production里写正式地址然后 axios 实例读import.meta.env.VITE_API_BASE_URL。这样打包的时候自动切换代码里一行判断都不用写。2. 响应式、生命周期与路由Vue 应用的地基三件套2.1 用原生 proxy 手写响应式彻底搞懂 reactive、ref、effect、computedVue 3 响应式原理是我笔记里翻看次数最多的内容也是面试必问。核心一句话reactive用Proxy拦截对象属性的读写ref则是在对象内部放一个.value指向真实值两者底层都靠effect收集依赖、触发更新。我自己照着源码思路手写过一个小型响应式系统。effect是核心它维护一个全局变量记录当前正在执行的副作用函数当副作用函数读取响应式对象的属性时get拦截器就把这个 effect 存进该属性的依赖集合里当属性被改写时set拦截器从依赖集合中取出所有 effect 依次执行。computed其实就是一个会缓存结果的 effect依赖不变化时返回缓存值依赖变化时重新求值。手写一遍之后很多语法层面解释不清的问题都顺了比如 ref 和 reactive 本质上是同一个机制在不同数据类型上的封装。有个实际应用值得说一下如果你用reactive包裹一个从接口返回的数组然后直接通过下标修改某一项Vue 3 的 Proxy 是可以拦截到变化的这在 Vue 2 里是做不到的。但如果你把整个对象重新赋值给另一个变量响应式链接就断了。遇到这种情况正确的做法是用Object.assign或者直接操作原对象而不是替换引用。2.2 页面生命周期加载顺序、异步请求时机与 keep-alive 的额外钩子Vue 页面生命周期八对钩子最常搞混的是created、onMounted和onActivated的使用场景。onMounted是最常用的因为此时 DOM 已经渲染完成可以操作节点也可以拿元素尺寸。但如果数据是异步请求回来的你会发现onMounted里发请求、nextTick后数据还没回来这是正常的——响应式数据更新会触发onUpdated但真正合适的是直接更新绑定模板中的值让它自动重新渲染。所以实践中接口请求放在onMounted或者onActivated里发数据用 ref 管理模板自动响应这就是所谓的声明式渲染思维。keep-alive缓存的组件有个容易踩的坑页面从缓存里恢复时onMounted不会再触发只有onActivated会触发。如果你在onMounted里做了数据初始化切走再切回来会发现页面还是旧数据。每个被 keep-alive 包裹的页面我通常把刷新数据逻辑写在onActivated里同时用onDeactivated清理定时器或未完成请求这样列表页刷新、详情页回退的场景才稳。2.3 路由参数传递的几种方式与路由拦截器路由笔记里我按使用场景整理了三种参数传递方式query 方式router.push({ path: /detail, query: { id: 1 } })URL 显示?id1适合分享给别人的链接刷新后参数不丢失。params 方式router.push({ name: detail, params: { id: 1 } })URL 上不显示参数但刷新后参数会丢。所以需要持久化的数据别用 params。动态路由path: /detail/:id通过route.params.id获取URL 上的:id直观清晰适合详情页。路由拦截器在项目里绕不开。beforeEach是最常用的全局前置守卫主要做登录校验和页面权限控制。我的做法是在路由 meta 里标记requiresAuth: true然后在守卫里判断 token 是否存在不存在就跳去登录页并把原本想去的地址通过 query 传过去登录成功后回跳。注意next()只能调用一次如果条件分支里重复调用会导致跳转不可控。afterEach我一般用来做页面的标题设置和埋点统计。还有onBeforeRouteUpdate这个函数当在同一个详情页切换不同 id 参数时比如列表点击了第二条数据组件实例实际上是被复用的onMounted不会重新触发必须手动 watchroute.params.id或使用onBeforeRouteUpdate来重新拉取数据。提示路由模式createWebHistory需要后端配合做 history 回退否则刷新就 404。如果后端环境不方便配 nginx用createWebHashHistory最省事URL 里多个#但不影响功能。3. 组件通信与样式细节文档没写透的实际问题3.1 $attrs 与透传多级组件传参的救星$attrs是 Vue 3 里一个常常被忽略但非常实用的特性。简单说父组件传入的、子组件没有通过props声明的所有属性和事件都会出现在$attrs中。手动给根元素绑定这些属性就叫透传。举个例子你封装了一个BaseInput组件希望它既能支持v-model还能让调用者直接传placeholder、maxlength、甚至原生的onFocus事件。最笨的办法是每个属性都在子组件里声明 props 再逐个绑定这样太脆。正确姿势是子组件只声明必要的 props比如modelValue剩下的全部自然透传。如果BaseInput内部根部不是真正的input而是包了一层div透传的属性会自动落在div上——但这往往不是你要的效果。这时用script setup里的defineOptions({ inheritAttrs: false })关掉自动透传手工在真正需要的元素上写v-bind$attrs。我踩过的坑多根节点组件不会自动透传控制台还会警告。所以写公共组件时如果模板里有多个根节点要么把多个根节点包成一个要么手动绑定$attrs。3.2 scoped 样式与样式穿透第三方组件样式修改指南style scoped的实现原理是通过给当前组件的元素添加>// vite.config.ts export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })这样前端代码里所有请求都走/api开头开发时由 Vite 代理到 Spring Boot生产时由 Nginx 做同样的转发。开发环境和服务端之间没有跨域问题也不用给后端配 CORS 允许所有来源。联调过程中常见的一个坑是文件上传。Vue 通过FormData传给 Spring Boot 时如果后端用 DTO 接收 multipart 参数字段名必须匹配前端别加多余的Content-Type头浏览器会自动带上boundary边界符。手动设置了反而经常导致后端解析失败。4.5 VSCode 里好用的 Vue 插件组合写 Vue 代码VSCode 插件直接影响效率。Vue 3 项目请用VolarVue Language Features而不是老的 VeturVolar 对 TS 支持和模板语法提示都强很多。搭配使用Vue 3 Snippets提供vbase、vfor等代码片段写模板快一倍。ESLint Prettier先统一 lint 规则再统一格式化规则保存时自动修复代码风格问题不用开会讨论。Path Intellisense路径智能补全少写错路径。Auto Rename Tag改开始标签自动改结束标签处理嵌套结构时保心神。5. 面试与进阶被问过 N 遍的问题整理5.1 一组必须理解的 Vue 核心面试题翻看 vue 面试题相关热词高频问题就那么几个但问法会变v-if 和 v-show 的区别v-if 是真正的条件渲染不渲染 DOM 节点切换时有创建/销毁的开销v-show 是 CSS 的 display 切换节点一直在适合频繁切换的场景。这个问题的延伸是避免在模板中直接写复杂表达式因为每次更新都会重新求值。v-for 里为什么需要 keykey 是虚拟 DOM diff 时的唯一标识。给上 key 之后列表变化时 Vue 可以尽量复用已有节点、知道哪些节点发生了移动而不是就地复用逐个比对。实践教训key 不要用数组下标要有稳定的业务 id否则删除列表中间一项时后续所有节点的状态可能错位。computed 和 watch 的区别computed 是声明式计算根据已有数据派生新数据有缓存watch 是命令式监听数据变化后执行副作用比如派发网络请求、操作 DOM。$nextTick 的原理修改数据后 DOM 不会立刻更新Vue 会把同一轮事件循环中多次数据修改合并到一次更新。nextTick的回调会等 DOM 更新完之后执行。这个机制是 Vue 高性能更新策略的核心。5.2 Vue 和 React 的核心差异面试里被问 Vue 和 React 的区别我的理解角度是更新粒度与心智模型模板 vs JSXVue 用的是模板语法接近 HTMLVue 编译器会做静态分析找出动态节点所以更新时可以精确到组件内的具体节点React 是全量虚拟 DOM diffJSX 本质上是函数调用灵活性高。响应式 vs 手动Vue 的响应式系统让数据变了视图自动更新心智负担低但修改复杂嵌套对象时容易碰边界React 需要setState显式触发更新配合 Fiber 架构可以做到并发调度和中断渲染适合极端复杂的交互场景。生态分工Vue 官方提供 Router、Pinia、DevTools全家桶体验统一React 更多靠社区选择自由度大但选型成本高。5.3 我整理 Vue 笔记的学习路线如果只看一个资料一定是官方文档Vue 3 官网的深入式教程和 API 参考至少过两遍。然后按顺序做三件事手写一遍响应式系统的核心模块reactive、ref、effect、computed。这一步投入产出比最高做完你再看 Vue 源码中的vue/reactivity包会有豁然开朗的感觉。用官方脚手架创建一个项目完整实现一个包含登录、权限、详情页、列表过滤的小应用把路由、状态管理、生命周期、组件通信全部用一遍。阅读优秀开源项目的源码实现比如 vueuse、Element Plus 的组件源码看别人怎么封装修饰器、怎么做类型体操。我的笔记已经形成了自己的目录环境搭建、核心原理、路由、组件设计、样式处理、实战坑点、面试题。每次踩坑就补一条每次新技术尝试就开一个新小节。读代码时用到某个特性再回头看笔记记忆会更牢。如果你想把这些内容整理成自己的版本强烈建议从响应式原理那节开始——那是整个 Vue 大厦最核心的基石也是你真正从会用 Vue走向懂 Vue的拐点。