Vue3前端面试核心知识点梳理

Vue3 前端面试核心知识点全梳理本文整理了 Vue3 生态中最常被问到的核心知识点涵盖 Composition API、Pinia、路由优化、请求优化、Vite 构建、UI 组件库与可视化等多个模块适合面试复习与体系化学习。一、Composition APIscript setup1.1 是什么Composition API组合式 API是 Vue3 推出的全新代码组织方式核心思想是「按业务功能聚合代码」而不是像 Options API 那样按代码类型data/methods/computed拆分。script setup是 Composition API 的语法糖也是目前 Vue3 项目的标准写法。1.2 与 Options API 对比特性Options APIComposition APIscript setup代码组织按 data/methods/computed/watch 分块同一功能分散各处按业务功能聚合相关变量、方法、监听写在一起逻辑复用Mixins命名冲突、来源不清晰composables 组合函数干净无冲突TypeScript需要装饰器类型推导差原生支持IDE 提示完善Tree-shaking不支持基于 ES Module未使用代码可被摇树优化代码量需要 export default、return 等样板代码语法糖简化导入即使用1.3 主要解决了什么问题大型组件逻辑分散难维护Options API 中同一个业务逻辑被拆到文件上下多处修改需要反复滚动组合式 API 将同一功能代码聚合一目了然。逻辑复用困难Mixins 存在命名冲突、溯源困难、执行顺序混乱等问题组合函数useXXX显式导入来源清晰无命名污染。TypeScript 类型支持差Options API 类型推导弱需要额外装饰器组合式 API 基于函数式写法天然支持完整类型推导。打包体积无法优化Options API 配置式对象写法无法 Tree-shaking组合式 API 按需导入无用代码自动删除。1.4 是 MVC 思想吗完全不是。MVC是后端/传统前端的三层职责分离架构Model-View-Controller需要手动写 Controller 中转视图与数据。Vue 整体是 MVVM 架构Model-View-ViewModelViewModel 通过响应式系统自动同步数据与视图不需要手动控制中转。Composition API 只是 ViewModel 层的两种代码组织方式之一不是架构分层思想。二、Pinia 状态管理2.1 是什么Pinia 是 Vue3 专用的全局公共数据仓库Store是 Vuex 的官方升级版。专门解决「多个页面/多个组件之间共享数据麻烦」的问题。2.2 三大核心概念概念对应组件作用statedata/ref仓库里存的原始数据如用户信息、购物车列表getterscomputed基于原始数据计算出的派生值如购物车总价actionsmethods修改数据、发接口请求的函数同步异步都能写2.3 与 Composition API组合函数的区别维度composables 组合函数Pinia Store作用范围组件内部复用逻辑组件销毁数据清空全局永久共享全项目任意组件调用适用场景当前页面用的分页、弹窗、表单逻辑登录用户、购物车、全局配置等跨页面数据数据生命周期随组件创建/销毁整个应用生命周期内持久存在简单区分口诀只给当前页面用 → 写useXXX组合函数好几个页面来回共用 → 丢进 Pinia 仓库。2.4 对比 Vuex 的优势砍掉了 mutations同步异步统一写在 actions 里少写一半代码每个业务单独建仓库文件模块化更清晰不会命名冲突原生支持 TypeScript类型推导完善支持 DevTools 时间旅行调试三、Vue Router 路由优化3.1 路由懒加载constroutes[{path:/write,name:Write,component:()import(../views/letter/WriteView.vue),// 懒加载meta:{title:写信,requiresAuth:true}}]核心作用不一次性加载所有页面代码只有用户跳转到对应路由时才下载该页面的 JS减小首屏体积优化白屏体验。3.2 全局前置守卫beforeEachrouter.beforeEach((to,from,next){cancelPendingRequests()// 路由切换时取消所有 pending 的请求consttokenlocalStorage.getItem(token)if(to.meta.requiresAuth!token){next(/login)}else{next()}})两大核心能力登录鉴权拦截读取本地 token需要登录的页面无 token 则强制跳登录页取消上一页残留请求路由切换时终止未完成的接口避免页面跳转后上一页的请求响应去更新已销毁的组件状态防止报错和无效渲染3.3 全局后置守卫afterEachrouter.afterEach((to){document.title(to.meta.title||回声) - EchoWall})统一自动设置页面标题不用每个页面单独写document.title。四、Element Plus UI 组件库4.1 是什么Element Plus 是 Vue3 专用的一套现成 UI 组件库Element UI 的 Vue3 升级版封装了后台开发 90% 常用控件按钮、表单、表格、弹窗、菜单、分页、上传等开箱即用不用从零写样式和交互。4.2 两种引入方式方式一全量引入适合小型项目// main.jsimportElementPlusfromelement-plusimportelement-plus/dist/index.cssapp.use(ElementPlus)方式二按需自动导入推荐项目级方案pnpmaddunplugin-vue-components unplugin-auto-import-D// vite.config.jsimportAutoImportfromunplugin-auto-import/viteimportComponentsfromunplugin-vue-components/viteimport{ElementPlusResolver}fromunplugin-vue-components/resolversexportdefaultdefineConfig({plugins:[AutoImport({resolvers:[ElementPlusResolver()]}),Components({resolvers:[ElementPlusResolver()]})]})配置完成后页面直接写el-buttonel-table即可自动导入用到哪个打包哪个。4.3 基本使用示例template el-input v-modelusername placeholder请输入账号/el-input el-button typeprimary clicklogin登录/el-button /template script setup import { ref } from vue import { ElMessage } from element-plus const username ref() const login () { ElMessage.success(登录成功) } /script五、ECharts 数据可视化5.1 是什么ECharts 是专门做数据图表的独立可视化库只负责折线图、饼图、柱状图、地图等图表渲染不提供任何表单、按钮等通用 UI 组件。5.2 与 Element Plus 的区别维度Element PlusECharts定位全套通用业务 UI 组件库专业数据可视化图表库覆盖范围按钮、表单、表格、弹窗、菜单等90%页面元素只做图表单一功能使用方式直接写el-xxx标签需要 DOM 容器 手动初始化实例适用场景后台页面搭建、业务表单数据统计、大屏可视化5.3 基本使用方式原生 ECharts 需要两步DOM 容器 手动初始化template div refchartRef stylewidth:100%;height:400px;/div /template script setup import { ref, onMounted } from vue import * as echarts from echarts const chartRef ref(null) onMounted(() { const myChart echarts.init(chartRef.value) myChart.setOption({ xAxis: { type: category, data: [周一, 周二] }, yAxis: { type: value }, series: [{ type: bar, data: [120, 200] }] }) }) /script也可以使用vue-echarts封装版直接写v-chart :optionchartOption/写法更接近组件化使用。六、Three.js 3D 可视化6.1 是什么Three.js 是基于 WebGL 的 3D 立体画面 JS 库能在浏览器里渲染 3D 模型、3D 场景常用于 3D 商品展示、数字展厅、三维可视化大屏、3D 小游戏等。6.2 三大核心要素缺一不可场景 Scene虚拟空间容器所有模型、灯光都要放进去相机 Camera观察视角决定从哪个角度看 3D 画面渲染器 Renderer把场景相机看到的画面输出到页面 DOM 上6.3 最小可运行示例template div refthreeBox stylewidth:100%;height:500px;/div /template script setup import { ref, onMounted, onUnmounted } from vue import * as THREE from three const threeBox ref(null) let scene, camera, renderer, cube onMounted(() { scene new THREE.Scene() camera new THREE.PerspectiveCamera(75, threeBox.value.clientWidth / threeBox.value.clientHeight, 0.1, 1000) camera.position.z 5 renderer new THREE.WebGLRenderer() renderer.setSize(threeBox.value.clientWidth, threeBox.value.clientHeight) threeBox.value.appendChild(renderer.domElement) const geometry new THREE.BoxGeometry(1, 1, 1) const material new THREE.MeshBasicMaterial({ color: 0x00ff00 }) cube new THREE.Mesh(geometry, material) scene.add(cube) function animate() { requestAnimationFrame(animate) cube.rotation.x 0.01 cube.rotation.y 0.01 renderer.render(scene, camera) } animate() }) onUnmounted(() renderer.dispose()) /scriptThree.js 是独立 JS 库不依赖 Vue在 Vue 中使用只需在组件挂载时初始化、销毁时释放资源即可。七、Vue 单文件组件 vs 原生前端三件套7.1 文件组织方式原生三件套Vue 单文件组件.vue按语言类型拆分HTML / CSS / JS 三个独立文件按组件拆分一个文件包含 template script style 三块改一个页面要切换 3 个文件改组件所有代码全在当前文件7.2 核心差异数据渲染方式原生 JS手动操作 DOMquerySelector、innerTextVue数据驱动视图只改变量页面自动更新响应式事件与作用域原生onclick绑定全局函数容易命名冲突Vueclick绑定组件内方法作用域隔离样式隔离原生 CSS全局生效容易样式覆盖冲突Vuestyle scoped自动加唯一属性标记样式只作用当前组件组件化复用原生只能复制粘贴代码无法封装复用Vue组件像标签一样重复使用支持 props、事件、插槽等完整组件化能力八、接口请求优化8.1 短时缓存30 秒 TTL适用场景变化频率低的数据主题列表、会员套餐、字典数据短时间内重复调用直接读内存不发请求。constcachenewMap()constDEFAULT_CACHE_TTL30000// 30 秒functiongetFromCache(config){if(config.method!get||config.noCache)returnnullconstkeygetCacheKey(config)constentrycache.get(key)if(!entry)returnnull// 过期则删除缓存if(Date.now()-entry.time(config.cacheTTL||DEFAULT_CACHE_TTL)){cache.delete(key)returnnull}returnentry.data}核心逻辑只缓存 GET 请求POST 等修改操作不缓存用method url params生成唯一 key超过 TTL 自动失效删除旧缓存支持noCache: true单独跳过缓存8.2 请求去重pending 期间共享 Promise适用场景同一接口快速连续点击 / 并发调用上一个请求还没返回避免同时发多条相同请求。constpendingRequestsnewMap()functiongetRequestKey(config){const{method,url,params}configreturn[method,url,JSON.stringify(params??{})].join()}// 请求拦截器service.interceptors.request.use((config){constkeygetRequestKey(config)// 已有相同请求 pending直接复用旧 Promiseif(pendingRequests.has(key)){config.adapter()pendingRequests.get(key)returnconfig}// 无缓存新建请求并存入 MapconstoriginPromiseaxios(config)pendingRequests.set(key,originPromise)// 请求结束后清除记录originPromise.finally(()pendingRequests.delete(key))returnconfig})核心原理利用「同一个 Promise 可以被多次 await/then但内部异步逻辑只执行一次」的特性多个并发调用共用同一个 pending Promise只产生一次网络请求。8.3 两种优化方案对比维度短时缓存TTL请求去重pending Promise解决场景请求结束后间隔一段时间重复调用请求还在加载中并发重复调用存储内容接口返回的数据正在 pending 的 Promise生命周期30 秒可配置请求期间有效结束立即清除是否走网络完全不走直接读内存只发 1 次网络请求其余复用结果两者可以搭配使用并发复用 Promise 短时效缓存双重优化减少请求量。8.4 Promise 基础回顾Promise 包裹异步操作三种状态pending进行中、fulfilled成功、rejected失败。// 创建 PromisefunctionfetchData(){returnnewPromise((resolve,reject){setTimeout(()resolve({list:[1,2,3]}),2000)})}// then/catch 用法fetchData().then(resconsole.log(res)).catch(errconsole.log(err))// async/await 用法项目最常用asyncfunctionquery(){constresawaitfetchData()console.log(res)}九、Vite 构建工具9.1 是什么Vite 是 Vue 作者尤雨溪开发的新一代前端工程化构建工具法语意为「快」干两件核心事本地开发开本地服务、转译.vue/ TS / CSS秒启动、秒热更新打包上线压缩、合并、拆分包输出可部署的 dist 静态文件9.2 为什么比 Webpack 快维度WebpackVite开发启动先全量打包再开服务大项目很慢直接开服务按需编译秒启动热更新 HMR文件改动重新打包依赖链越大越卡仅更新修改的单个模块速度稳定底层转译JS 写的 loader性能弱esbuildGo 语言预处理快几十倍配置量复杂手动配各种 loader / plugin开箱即用大部分场景零配置打包引擎开发/打包同一套开发用 esbuild打包用 Rollup兼顾速度与体积生活化比喻Webpack 开店前把所有菜全部炒好再开门准备时间长Vite 先开门迎客客人点哪道菜现炒哪一道第三方依赖提前批量预处理9.3 构建优化三包代码分割Vite底层 Rollup自动将代码拆分为三类独立 chunkvendor 第三方包Vue、Element Plus、ECharts 等稳定依赖单独打包浏览器长期缓存runtime 运行时代码打包工具底层、模块加载逻辑抽离业务变动不影响第三方包缓存业务页面分包路由懒加载()import()自动拆分成独立页面文件首屏只加载当前页核心收益首屏按需加载减小初始体积第三方依赖长期缓存二次访问提速。9.4 构建优化Gzip / Brotli 双压缩两种文本压缩算法把打包后的 JS / CSS / HTML 压小后传输浏览器自动解压执行。压缩方式压缩率兼容性Gzip约 60%-70%所有浏览器 100% 兼容Brotli比 Gzip 再小 15%-25%现代浏览器均支持实现步骤构建阶段使用vite-plugin-compression插件打包时生成.gz和.br两套压缩文件服务器配置Nginx 开启 gzip_static / brotli_static优先返回压缩文件旧浏览器自动降级十、知识体系总览Vue3 前端技术栈 ├── 核心框架 │ ├── Composition APIscript setup—— 代码组织与逻辑复用 │ ├── 响应式原理ref / reactive—— 数据驱动视图 │ └── MVVM 架构 —— 区别于 MVC ├── 状态管理 │ └── Pinia —— 全局数据仓库state / getters / actions ├── 路由 │ ├── 路由懒加载 —— 首屏性能优化 │ ├── 导航守卫 —— 鉴权拦截 取消残留请求 │ └── 动态标题 —— afterEach 统一设置 ├── UI 与可视化 │ ├── Element Plus —— 通用 UI 组件库 │ ├── ECharts —— 2D 数据图表 │ └── Three.js —— 3D 立体可视化 ├── 请求层优化 │ ├── 短时缓存30s TTL—— 减少重复请求 │ ├── 请求去重pending Promise—— 避免并发重复 │ └── 路由切换取消请求 —— 防止无效更新 └── 工程化构建 ├── Vite —— 新一代构建工具 ├── 三包代码分割 —— 按需加载 长期缓存 └── Gzip / Brotli 双压缩 —— 减小传输体积结语Vue3 生态的核心优化思路可以总结为一句话按需加载、减少重复、提升开发体验。无论是 Composition API 的代码组织方式、Pinia 的模块化状态管理还是 Vite 的按需编译和代码分割本质上都是在解决「项目变大后代码难维护、加载慢、开发效率低」的问题。理解每个技术点解决了什么痛点、适用什么场景比死记 API 更重要——这也是面试时真正能拉开差距的地方。