前端八股文面经大全：上海威派格前端实习（2026-05-07）·面经深度解析

前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司上海威派格智慧水务股份有限公司面试时间2026年5月7日面试岗位前端实习面试体验后半场项目配置和Git相关答得不好❓面试问题HR面试自我介绍介绍一下医疗智能问答系统项目中所从事的工作内容智能聊天助手的“状态管理与持久性”是怎么构建的来企业主要是想学习哪方面的技能技术面试官Vue2跟Vue3的区别Webpack跟Vite它们两个有什么区别Javascript跟Typescript的区别项目中的多角色权限守卫是怎么拦截的let、const、var有哪些区别防抖跟节流是什么怎么去实现现场代码实操共享屏幕展示Vue2项目7. 怎么打开一个终端窗口8. 哪个文件是进行包管理的文件9. yarn和npm有什么区别10. 从远程拉取代码的命令是什么11. 远程仓库有更新如何拉取新代码12. Git怎么切换分支13. 如何把项目打包成静态文件14. vue.config.js里面一般写什么内容15. .gitignore的作用是什么16. v-if和v-show的区别17. inject的作用反问面试评价、反馈时间、公司业务来源牛客网FreedomChaser木木有话说刷前先看说实话最近我也有点失落感觉传统前端的需求岗位确实少了很多。AI化潮流势不可挡啊。 上海威派格前端实习·深度解析面试整体画像维度特征面试风格基础八股型 工程化实操型 真实项目追问型难度评级⭐⭐⭐三星基础为主实操题考验熟练度考察重心Vue基础、构建工具、TS/JS、Git命令、项目配置特殊之处后半场基于真实项目提问考察工程化环境熟练度逐题深度解析一、Vue2和Vue3的区别回答思路从响应式原理、API风格、TypeScript支持、性能、新特性等多个维度对比。维度Vue2Vue3响应式Object.defineProperty需Vue.set处理新增属性Proxy可拦截13种操作支持数组索引/长度变化API风格Options APIdata、methods、computed等Composition APIsetup函数逻辑复用更灵活TypeScript支持较弱原生支持类型推断友好性能初始化递归遍历所有属性懒递归访问时才深度代理初始化更快体积较大Tree-shaking友好可按需引入根节点单根节点多根节点Fragment新特性-Teleport、Suspense二、Webpack和Vite的区别回答思路从开发环境启动速度、热更新、生产打包、配置复杂度等维度对比。维度WebpackVite开发环境打包所有模块后启动慢利用浏览器ESM直接启动秒开热更新修改后重新打包相关模块只编译变更的模块几乎瞬时生产打包统一打包成bundle使用Rollup预打包产物优化好配置复杂度高loader、plugin繁多低开箱即用三、JavaScript和TypeScript的区别维度JavaScriptTypeScript类型系统动态类型运行时推断静态类型编译时检查错误发现运行时才发现编写时即可捕获IDE提示可读性大型项目类型难追踪类型即文档重构更安全编译直接运行需编译成JS生态通用IDE支持更好智能提示、重构四、多角色权限守卫怎么拦截回答思路权限守卫的核心是路由拦截。// Vue Router 全局前置守卫router.beforeEach((to,from,next){consttokenlocalStorage.getItem(token)constrolestore.state.user.role// 用户角色if(!tokento.path!/login){next(/login)}elseif(to.meta.role!to.meta.role.includes(role)){next(/403)// 无权限}else{next()}})五、let、const、var的区别维度varletconst作用域函数作用域块级作用域块级作用域变量提升是初始undefined是但存在暂时性死区是存在TDZ重复声明允许不允许不允许重新赋值允许允许不允许引用类型属性可改挂载window是否否六、防抖和节流防抖动作停止后延迟执行适用于输入框搜索、resizefunctiondebounce(fn,delay){lettimernullreturnfunction(...args){clearTimeout(timer)timersetTimeout(()fn.apply(this,args),delay)}}节流固定间隔执行适用于滚动加载、按钮限流functionthrottle(fn,delay){letlastTime0returnfunction(...args){constnowDate.now()if(now-lastTimedelay){lastTimenowfn.apply(this,args)}}}七~十七工程化实操问答7. 怎么打开一个终端窗口VS CodeCtrl MacCmd 或菜单 Terminal → New Terminal8. 包管理文件package.json记录依赖、脚本、配置锁文件package-lock.jsonnpm/yarn.lockyarn9. yarn和npm的区别维度npmyarn速度较慢串行较快并行缓存有更高效workspacenpm7支持原生支持10. 从远程拉取代码的命令gitclone仓库地址11. 远程有更新如何拉取新代码gitpull origin分支名# 拉取并合并# 或分步git fetch git merge12. Git切换分支gitcheckout分支名# 切换gitcheckout-b新分支名# 创建并切换13. 打包成静态文件npmrun build# Vue CLI / Vite 通用# 产物在 dist/ 或 build/ 目录14. vue.config.js的内容module.exports{publicPath:/,devServer:{proxy:{/api:http://localhost:8080}},configureWebpack:{},chainWebpack:config{}}15. .gitignore的作用指定不被Git追踪的文件/目录node_modules、dist、.env等16. v-if和v-show的区别维度v-ifv-show原理条件假时DOM不存在条件假时display:none切换开销高销毁重建低CSS切换初始渲染条件假时不渲染总会渲染场景切换频率低切换频率高17. inject的作用Vue依赖注入父组件provide提供数据后代组件inject接收避免props逐层传递// 父组件provide(){return{user:this.user}}// 子组件inject:[user]知识点速查表知识点核心要点Vue2 vs Vue3defineProperty vs Proxy、Options vs Composition、FragmentWebpack vs Vite开发环境打包/不打包、HMR效率、Rollup生产打包TS vs JS静态/动态类型、编译时/运行时错误、IDE支持权限守卫路由拦截、token校验、角色匹配变量声明var函数作用域/提升、let/const块级作用域/TDZ防抖节流防抖合并输入框、节流降频滚动Git命令clone、pull、checkout、branch项目配置package.json、vue.config.js、.gitignore指令v-if销毁重建、v-show CSS切换inject/provide跨级传值避免props逐层传递 最后一句威派格这场面试前半场是基础“扫盲”后半场是工程化“摸家底”。那些AI可以帮你生成的代码面试官直接跳过反而聚焦在Git命令、项目配置、打包部署这些最基础、最容易被忽视的实操能力上。AI能帮你写组件但不能帮你解决Git冲突能帮你写vue.config.js但不能帮你在面试官的终端里打出那条npm run build。工程化环境的熟练度依然是区分“会用AI”和“真懂开发”的重要标尺。