前端的刷题路线

Source

作为一个技术栈：

我们对前端vue3的理解，和信息量储备达到面试的强度

我们一起梳理一下vue3的技术栈的体系
1.vue3语法级别
2.创建vue的架子
3.对vite打包，在代码工程级别的理解
4.pina,router，vant4，element-plus
5.产品级别的理解，应该设计什么样的版式，界面

1. Vue3 语法级别（面试强度）

面试官想听的绝不是ref和reactive的区别，而是响应式原理和编译优化。

  • 响应式底层（必考）：reactive基于Proxy，代理整个对象，能拦截增删改查；ref本质是{ value: ... }，通过类的getter/setter劫持。面试金句：reactive存在对象解构丢失响应的问题（因为结构破坏代理），必须借助toRefs；而ref通过.value保持了响应性引用，适合基础类型和需要重新赋值的场景。
  • Composition API vs Options API：不仅仅是代码组织，核心是**“逻辑抽取与复用”。组合式API将响应式变量和函数聚合在一起，比mixins解决了命名冲突和数据来源不清晰**的问题。
  • 编译时优化（核心亮点）：
    • 静态提升：Vue3将不变的静态节点提升到render函数外部，只创建一次，后续diff时直接跳过。
    • 更新类型标记（PatchFlags）：模板编译时给动态节点打上标记（如TEXT、CLASS），diff时只比对带标记的节点，跳过静态树。
    • Block Tree：将模板编译为嵌套的Block，通过“靶向更新”跳过平级兄弟节点的无差别遍历。
  • 生命周期：setup执行时机早于beforeCreate，在setup中this为undefined。

2. 创建 Vue 的架子（工程初始化）

现在面试不问npm init命令，而是问**“你对工程目录的设计理解”**。

  • 官方推荐：create-vue（基于Vite）已取代vue-cli（基于Webpack）。
  • 工程化关键目录（面试重点）：
    • src/apis：接口层（按模块划分）。
    • src/composables：存放可复用的组合式函数（useXxx），这是Vue3逻辑复用的核心资产。
    • src/directives：自定义指令。
    • src/plugins：插件注入（如全局错误处理）。
  • 环境变量：.env.development、.env.production，但注意只有以VITE_开头的变量才会暴露给客户端，这是Vite的安全机制。

3. Vite 打包与代码工程级别理解（拉开差距的地方）

面试官会问：“Vite很快，原理是什么？生产环境为什么用Rollup？”

  • 开发环境（冷启动快）：利用ESM（ES Module）+ Native ES Module。Vite将预构建（Pre-bundling）的依赖（如vue、element-plus）通过esbuild（Go语言编写，比JS快10-100倍）打包，利用304强缓存；源码按需请求，拦截import并实时编译。
  • 生产环境（Rollup打包）：因为esbuild对Tree-shaking和代码分割的支持不如Rollup成熟，所以生产环境仍用Rollup做更优的分包策略（manualChunks）。
  • 工程级理解（核心）：
    • 依赖预构建：解决“第三方库模块过多导致请求瀑布流”的问题，将CommonJS/UMD转为ESM。
    • 热更新（HMR）：基于WebSocket，精准替换编辑的模块，不刷新页面，保留状态。
    • SSR场景痛点：Vite在SSR中需要关闭ssr.external以让依赖在服务端也走esbuild处理。

4. Pinia, Router, Vant4, Element-Plus（生态整合）

面试官不会问“怎么用”，而是问“选型理由”和“SSR/按需加载兼容性”。

  • Pinia（碾压Vuex）：
    • 核心优势：无mutations（同步异步都直接走actions），完美的Typescript类型推断，支持组合式Store（defineStore('id', () => { ... })）和选项式Store。
    • 持久化：问到你用过pinia-plugin-persistedstate吗？不仅要会用，还要说出存储方式（localStorage）和序列化/反序列化的安全风险（如XSS）。
  • Vue Router v4：
    • 核心变化：history模式（createWebHistory）取代mode: 'hash'（需要Nginx配置try_files）。
    • 路由守卫：全局前置守卫（beforeEach）常用于权限控制，重点考察动态路由添加（addRoute）在用户登录后按角色挂载路由树的逻辑。
  • UI库选型（Vant4 vs Element-Plus）：
    • 底层差异：Vant4主打移动端（Touch事件、rem/vw适配）；Element-Plus主打桌面端（鼠标悬浮、复杂表格）。
    • 面试必杀技：按需引入——不要全局引入。基于unplugin-vue-components和unplugin-auto-import实现自动按需引入，组件库的样式文件会被单独抽离，减少打包体积。面试官会问：自动引入后，ElMessage为什么需要createApp挂载到根节点？因为它是命令式组件，脱离模板，必须手动管理DOM销毁。

5. 产品级别的理解（版式与界面设计）

这是高级前端/架构师视角。面试官问：“让你从0搭建后台/移动端，你怎么设计？”

  • 后台管理系统（Element-Plus）标准布局：
    • 经典三栏式：Aside（侧边栏） + Header（顶部导航） + Main（内容区-带路由缓存keep-alive）。
    • 权限驱动UI：菜单不是写死的，而是根据路由元信息（meta.roles）动态渲染。产品层面要设计“页面级权限”（路由守卫拦截）和**“组件级权限”**（自定义指令v-permission控制按钮显隐）。
    • 多标签页（Tabs-view）：用pinia存储打开过的路由记录，支持右键关闭、刷新当前页（刷新本质是重设router-view的key值）。
  • 移动端（Vant4）标准版式：
    • 底部TabBar + 顶部导航栏 + 中间区域（router-view）。
    • 页面容器设计：SafeArea（安全区适配）处理刘海屏。
  • 产品级设计原则（超加分项）：
    • 加载策略：路由懒加载（() => import()）+ 页面骨架屏（Skeleton）优先于Loading旋转圈，产品体验更好。
    • 状态管理设计：不要把所有接口数据放Pinia。Pinia只存“多页面共享”且“需要响应式联动”的数据（如用户信息、权限列表、全局配置），页面独有数据放在组件局部状态或通过provide/inject传递，避免Pinia体积过大导致内存泄漏。
    • 错误边界：利用vue:errorHandler全局捕获错误，配合Sentry做产品级的上报。

面试官终极追问（高频压轴题）

“Vue3性能这么好，项目上线后还是有白屏卡顿，怎么排查？”

回答策略（体现真功夫）：

  1. 首屏加载慢：检查vendor.js体积（利用rollup-plugin-visualizer可视化分析），将element-plus等大型库用CDN（vite.config中的rollupOptions.external）剥离。
  2. 页面卡顿（大量数据渲染）：不要用v-for直接渲染万条数据，必须用虚拟滚动（如vue-virtual-scroller），或者利用markRaw标记只读数据，避免Vue递归代理大对象。
  3. 内存泄漏：检查在onUnmounted中是否清除了setInterval和addEventListener（组合式API中通常用watch的onCleanup副作用处理）。