前端开发工程师面试题及答案.docx

前端开发工程师面试题及答案

一、基础理论题

CSS盒模型有两种，实际开发中怎么切换和使用？

答案：分content-box（标准盒模型）和border-box（IE盒模型）。标准盒模型的width/height只包含内容，border和padding会撑大元素；border-box的width/height包含内容、border和padding。

实际开发中几乎都用border-box，因为不用计算border/padding对宽高的影响，比如写表单输入框时，设置width:100%后加padding不会超出父容器。切换用box-sizing:border-box，一般会全局配置：

*{box-sizing:border-box;margin:0;padding:0;}

之前做弹窗组件时，没设box-sizing导致弹窗边框把宽度撑超，加了全局配置后就解决了。

JS闭包在项目里怎么用？有什么潜在问题？

答案：闭包常用在封装私有变量、防抖节流、模块化里。比如写防抖函数时，用闭包保存定时器ID，避免每次调用都重新创建：

functiondebounce(fn,delay){

lettimer=null;//闭包保存timer

returnfunction(...args){

clearTimeout(timer);

timer=setTimeout(()=fn.apply(this,args),delay);

}

}

潜在问题是内存泄漏，比如在Vue组件里用闭包保存了this（比如定时器里引用组件实例），组件销毁后没清除，就会导致实例无法回收。解决办法是组件销毁时清除定时器或解绑事件，比如在beforeUnmount里clearTimeout(timer)。

HTML语义化标签有哪些？实际开发中为什么要做语义化？

答案：常用的有headernavmainsectionarticlefooteraside。

实际开发中做语义化，一是方便无障碍阅读（比如屏幕阅读器靠语义标签识别内容结构），二是利于SEO（有哪些信誉好的足球投注网站引擎能更好解析页面结构，比如article里的内容会被优先抓取），三是提高代码可读性。之前做博客项目，用article包文章内容，aside包侧边栏，后来SEO抓取排名比之前用div时高了不少。

二、框架应用题（Vue/React二选一作答即可，这里以Vue为例）

Vue3的响应式原理和Vue2有什么区别？实际项目中遇到过哪些响应式相关的坑？

答案：Vue2用Object.defineProperty，只能监听对象属性的读写，无法监听数组索引变化、对象新增属性；Vue3用Proxy，能监听数组变化、对象新增/删除属性，还支持Map/Set这些数据结构。

踩过的坑：Vue2里给对象新增属性时，比如this.user.age=20，页面不会更新，得用this.$set(this.user,age,20)；Vue3里虽然Proxy支持新增属性，但如果是深层对象，比如conststate=reactive({user:{}})，后来给state.user={name:xxx}是响应式的，但如果先定义state.user={}，再给state.user.name=xxx，也能响应，不过如果是shallowReactive就不行，之前做用户信息编辑时，用了shallowReactive导致深层属性更新不触发视图，换成reactive就好了。

Vue组件间通信有哪些方式？分别适合什么场景？

答案：

父传子：props，适合简单数据传递，比如父组件给子组件传按钮文本、是否禁用状态；

子传父：emit，适合子组件触发父组件事件，比如子组件点击按钮后通知父组件提交表单；

兄弟组件：小项目用EventBus（mitt库），大项目用Pinia，比如两个兄弟组件都要用到“是否显示弹窗”的状态，小项目用mitt发事件，大项目用Pinia存状态更易维护；

跨层级：provide/inject，适合深层组件通信，比如后台管理系统的“用户权限”，在根组件provide权限数据，所有子组件都能inject获取，不用层层传props；

Pinia/Vuex：适合全局状态，比如购物车数据、用户登录状态，之前做电商项目，购物车的添加/删除操作都通过Pinia，所有组件都能实时获取购物车数量。

三、工程化与性能题

Webpack打包速度慢，怎么优