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

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

本文整理了 Vue3 生态中最常被问到的核心知识点，涵盖 Composition API、Pinia、路由优化、请求优化、Vite 构建、UI 组件库与可视化等多个模块，适合面试复习与体系化学习。

一、Composition API（<script setup>）

1.1 是什么？

Composition API（组合式 API）是 Vue3 推出的全新代码组织方式，核心思想是「按业务功能聚合代码」，而不是像 Options API 那样按代码类型（data/methods/computed）拆分。

<script setup>是 Composition API 的语法糖，也是目前 Vue3 项目的标准写法。

1.2 与 Options API 对比

1.3 主要解决了什么问题？

1. 大型组件逻辑分散难维护：Options API 中同一个业务逻辑被拆到文件上下多处，修改需要反复滚动；组合式 API 将同一功能代码聚合，一目了然。

2. 逻辑复用困难：Mixins 存在命名冲突、溯源困难、执行顺序混乱等问题；组合函数（useXXX）显式导入，来源清晰，无命名污染。

3. TypeScript 类型支持差：Options API 类型推导弱，需要额外装饰器；组合式 API 基于函数式写法，天然支持完整类型推导。

4. 打包体积无法优化：Options API 配置式对象写法无法 Tree-shaking；组合式 API 按需导入，无用代码自动删除。

1.4 是 MVC 思想吗？

完全不是。

• MVC是后端/传统前端的三层职责分离架构（Model-View-Controller），需要手动写 Controller 中转视图与数据。
• Vue 整体是 MVVM 架构（Model-View-ViewModel），ViewModel 通过响应式系统自动同步数据与视图，不需要手动控制中转。
• Composition API 只是 ViewModel 层的两种代码组织方式之一，不是架构分层思想。

二、Pinia 状态管理

2.1 是什么？

Pinia 是 Vue3 专用的全局公共数据仓库（Store），是 Vuex 的官方升级版。专门解决「多个页面/多个组件之间共享数据麻烦」的问题。

2.2 三大核心概念

2.3 与 Composition API（组合函数）的区别

简单区分口诀：只给当前页面用 → 写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 全局前置守卫beforeEach

router.beforeEach((to,from,next)=>{cancelPendingRequests()// 路由切换时取消所有 pending 的请求consttoken=localStorage.getItem('token')if(to.meta.requiresAuth&&!token){next('/login')}else{next()}})

两大核心能力：

1. 登录鉴权拦截：读取本地 token，需要登录的页面无 token 则强制跳登录页
2. 取消上一页残留请求：路由切换时终止未完成的接口，避免页面跳转后上一页的请求响应去更新已销毁的组件状态，防止报错和无效渲染

3.3 全局后置守卫afterEach

router.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.jsimportElementPlusfrom'element-plus'import'element-plus/dist/index.css'app.use(ElementPlus)

方式二：按需自动导入（推荐，项目级方案）

pnpmaddunplugin-vue-components unplugin-auto-import-D

// vite.config.jsimportAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components/resolvers'exportdefaultdefineConfig({plugins:[AutoImport({resolvers:[ElementPlusResolver()]}),Components({resolvers:[ElementPlusResolver()]})]})

配置完成后，页面直接写<el-button><el-table>即可自动导入，用到哪个打包哪个。

4.3 基本使用示例

<template> <el-input v-model="username" placeholder="请输入账号"></el-input> <el-button type="primary" @click="login">登录</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 的区别

5.3 基本使用方式

原生 ECharts 需要两步：DOM 容器 + 手动初始化

<template> <div ref="chartRef" style="width: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 :option="chartOption"/>，写法更接近组件化使用。

六、Three.js 3D 可视化

6.1 是什么？

Three.js 是基于 WebGL 的 3D 立体画面 JS 库，能在浏览器里渲染 3D 模型、3D 场景，常用于 3D 商品展示、数字展厅、三维可视化大屏、3D 小游戏等。

6.2 三大核心要素（缺一不可）

1. 场景 Scene：虚拟空间容器，所有模型、灯光都要放进去
2. 相机 Camera：观察视角，决定从哪个角度看 3D 画面
3. 渲染器 Renderer：把场景+相机看到的画面输出到页面 DOM 上

6.3 最小可运行示例

<template> <div ref="threeBox" style="width: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()) </script>

Three.js 是独立 JS 库，不依赖 Vue，在 Vue 中使用只需在组件挂载时初始化、销毁时释放资源即可。

七、Vue 单文件组件 vs 原生前端三件套

7.1 文件组织方式

7.2 核心差异

1. 数据渲染方式

   • 原生 JS：手动操作 DOM（querySelector、innerText）
   • Vue：数据驱动视图，只改变量，页面自动更新（响应式）

2. 事件与作用域

   • 原生：onclick绑定全局函数，容易命名冲突
   • Vue：@click绑定组件内方法，作用域隔离

3. 样式隔离

   • 原生 CSS：全局生效，容易样式覆盖冲突
   • Vue<style scoped>：自动加唯一属性标记，样式只作用当前组件

4. 组件化复用

   • 原生：只能复制粘贴代码，无法封装复用
   • Vue：组件像标签一样重复使用，支持 props、事件、插槽等完整组件化能力

八、接口请求优化

8.1 短时缓存（30 秒 TTL）

适用场景：变化频率低的数据（主题列表、会员套餐、字典数据），短时间内重复调用直接读内存，不发请求。

constcache=newMap()constDEFAULT_CACHE_TTL=30000// 30 秒functiongetFromCache(config){if(config.method!=='get'||config.noCache)returnnullconstkey=getCacheKey(config)constentry=cache.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）

适用场景：同一接口快速连续点击 / 并发调用，上一个请求还没返回，避免同时发多条相同请求。

constpendingRequests=newMap()functiongetRequestKey(config){const{method,url,params}=configreturn[method,url,JSON.stringify(params??{})].join('&')}// 请求拦截器service.interceptors.request.use((config)=>{constkey=getRequestKey(config)// 已有相同请求 pending，直接复用旧 Promiseif(pendingRequests.has(key)){config.adapter=()=>pendingRequests.get(key)returnconfig}// 无缓存，新建请求并存入 MapconstoriginPromise=axios(config)pendingRequests.set(key,originPromise)// 请求结束后清除记录originPromise.finally(()=>pendingRequests.delete(key))returnconfig})

核心原理：利用「同一个 Promise 可以被多次 await/then，但内部异步逻辑只执行一次」的特性，多个并发调用共用同一个 pending Promise，只产生一次网络请求。

8.3 两种优化方案对比

两者可以搭配使用：并发复用 Promise + 短时效缓存，双重优化减少请求量。

8.4 Promise 基础回顾

Promise 包裹异步操作，三种状态：pending（进行中）、fulfilled（成功）、rejected（失败）。

// 创建 PromisefunctionfetchData(){returnnewPromise((resolve,reject)=>{setTimeout(()=>resolve({list:[1,2,3]}),2000)})}// then/catch 用法fetchData().then(res=>console.log(res)).catch(err=>console.log(err))// async/await 用法（项目最常用）asyncfunctionquery(){constres=awaitfetchData()console.log(res)}

九、Vite 构建工具

9.1 是什么？

Vite 是 Vue 作者尤雨溪开发的新一代前端工程化构建工具（法语意为「快」），干两件核心事：

1. 本地开发：开本地服务、转译.vue/ TS / CSS，秒启动、秒热更新
2. 打包上线：压缩、合并、拆分包，输出可部署的 dist 静态文件

9.2 为什么比 Webpack 快？

生活化比喻：

• Webpack = 开店前把所有菜全部炒好再开门，准备时间长
• Vite = 先开门迎客，客人点哪道菜现炒哪一道，第三方依赖提前批量预处理

9.3 构建优化：三包代码分割

Vite（底层 Rollup）自动将代码拆分为三类独立 chunk：

1. vendor 第三方包：Vue、Element Plus、ECharts 等稳定依赖单独打包，浏览器长期缓存
2. runtime 运行时代码：打包工具底层、模块加载逻辑抽离，业务变动不影响第三方包缓存
3. 业务页面分包：路由懒加载()=>import()自动拆分成独立页面文件，首屏只加载当前页

核心收益：首屏按需加载，减小初始体积；第三方依赖长期缓存，二次访问提速。

9.4 构建优化：Gzip / Brotli 双压缩

两种文本压缩算法，把打包后的 JS / CSS / HTML 压小后传输，浏览器自动解压执行。

实现步骤：

1. 构建阶段：使用vite-plugin-compression插件，打包时生成.gz和.br两套压缩文件
2. 服务器配置：Nginx 开启 gzip_static / brotli_static，优先返回压缩文件，旧浏览器自动降级

十、知识体系总览

Vue3 前端技术栈 ├── 核心框架 │ ├── Composition API（script 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 更重要——这也是面试时真正能拉开差距的地方。