采访对象：前端开发工程师

面试时常：1小时

采访地点：百度如流

背景与目的

• 背景介绍： 这是一场关于百度文库前端开发工程师岗位的技术面试，主要考察候选人的技术能力和项目经验。 • 采访目的： 评估候选人的前端开发技能、项目经验以及对Vue框架的理解程度。

核心问题与回答

Q1：请简单介绍一下自己？

• A1： • 我是百度文库的前端开发工程师，主要负责APP内嵌H5页面的开发，技术栈主要是Vue2和Vue3，也有少量项目使用React。 • 自我介绍：23年毕业于xxx理工学院，有3年前端开发经验，目前在xxx科技公司负责智慧停车业务线的前端开发工作，搭建了包含C端H5小程序和B端管理系统的智慧停车管理平台。同时是uniapp开源组件库Wot UI的团队成员，参与开发了高拓展性的瀑布流组件和通用型脚手架。

Q2：请说一下盒子模型？

• A2： • 盒子模型主要有BFC、IFC和FFC布局。 • BFC会创建一个独立的空间，不受外部环境影响。触发BFC的条件包括：overflow:hidden/auto、绝对定位等。 • HTML的body标签也是一个BFC。

Q3：请解释一下弹性布局？

• A3： • 弹性布局（Flex布局）是现在常用的布局方式，取代了传统的浮动布局。 • Flex布局有主轴和侧轴，主轴属性有justify-content（居中、space-between等），侧轴属性有align-items（start、center、end等）。 • 其他属性包括flex-grow、flex-shrink、flex-basis用于设置伸缩基准，order用于子元素排序，gap用于设置间距。

Q4：如何实现一个父元素内两个子元素水平垂直居中，其中左边子元素固定宽高100×100，右边子元素宽度自适应，高度100？

• A4： • 父元素开启flex布局，设置justify-content:center和align-items:center。 • 左边子元素设置固定宽高100×100。 • 右边子元素设置flex:1，高度100。

Q5：实现一个四宫格布局有哪些方法？

• A5： • 方法一：使用flex布局，设置每个元素宽高为1/2，开启flex-wrap实现自动换行。 • 方法二：使用grid布局，设置两列两行，现代浏览器基本都支持grid布局。

Q6：除了px单位外，还用过哪些单位？

• A6： • 小程序常用rpx，H5可以用rem。 • 字体单位有em。 • 响应式布局常用vw、vh、dvh、dvw等。 • 移动端还有vmin、vmax。

Q7：Vue中如何保证样式隔离？

• A7： • 在style标签上添加scoped属性实现样式隔离。 • Vue3会在编译时生成data属性加上文件哈希值，每个组件的哈希值不同，通过属性选择器实现样式隔离。

Q8：JavaScript的数据类型有哪些？

• A8： • 基本类型：number、boolean、string、undefined、null、symbol。 • 引用类型：object（包括function、array等）。

Q9：如何判断一个数据的类型？

• A9： • 使用typeof。 • 使用instanceof。 • 通过原型方法判断，检查对象的原型是否是某个类的原型。

Q10：请解释一下闭包？

• A10： • 闭包是指函数返回另一个函数，且内部函数引用了外部函数的变量，形成闭包。 • 不当使用闭包可能导致内存泄漏。 • 合理使用闭包可以实现私有变量等功能。 • 工作中常用于防抖节流等场景。

Q11：请手写一个深拷贝的实现？

• A11： • 首先判断是否是基本类型，是则直接返回。 • 判断是否是特殊类型（函数、正则、日期等），需要特殊处理。 • 处理集合类型（Map、Set）。 • 处理数组和对象，递归拷贝所有属性。 • 使用属性描述符拷贝自由属性，可以处理Symbol等特殊属性。

Q12：Vue3的组件通信方式有哪些？

• A12： • props/emit父子组件通信。 • 通过class等属性传递。 • 作用域插槽。 • provide/inject跨层级通信。 • 获取组件实例通信。 • 使用组合式函数或状态管理库（如Pinia）共享数据。 • 路由传参。

Q13：为什么选择Pinia而不是Vuex？

• A13： • Vuex使用起来较繁琐，有mutation（不支持异步）和action需要配合使用。 • Pinia更简单扁平，只有state和action，且action支持异步。 • Pinia对TypeScript支持更友好。

Q14：Vue2和Vue3的响应式有什么区别？

• A14： • Vue2使用Object.defineProperty，只能监听自有属性，需要重写数组方法。 • Vue3使用Proxy实现全对象代理，可以监听新增/删除属性。 • Vue3通过ref和reactive实现响应式，底层使用WeakMap建立依赖关系。

Q15：Vue3还有哪些优化？

• A15： • 架构改为monorepo，源码体积更小。 • 更好的Tree Shaking支持。 • 编译优化：静态提升、预字符串化、patch flag标记静态节点。 • diff算法从双端diff改为快速diff。 • 组合式API更灵活。 • v-if和v-show优先级与Vue2相反。

Q16：请介绍一下你参与的wot UI组件库？

• A16： • 主要负责瀑布流组件和全局提示(toast)组件。 • 瀑布流组件解决了uniapp社区现有组件在页面切换时布局异常的问题。 • 采用父子解耦架构，父组件维护列高和坐标，子组件通过作用域插槽支持任意内容。 • 实现了异步队列和超时熔断机制，支持并行加载串行排版。 • 做了增量更新优化，避免全部重排。 • toast组件实现了状态和UI分离，支持在纯JS文件中调用。

Q17：请介绍一下社区知识问答系统项目？

• A17： • 主要负责对话的流式渲染。 • 后端处理用户提问优化，通过向量数据库匹配最相似答案。 • 前端负责将返回结果进行流式渲染展示。

Q18：你有什么问题想问我们？

• A18： • 询问岗位具体工作内容（百度文库相关业务）。 • 询问团队规模和配置（前端团队约五六十人）。 • 寻求成长性建议（建议放松心态，准备好技术基础）。

访谈总结

本次面试全面考察了候选人的前端技术能力，包括CSS布局、JavaScript基础、Vue框架原理等。候选人展示了扎实的技术基础，特别是在组件开发方面有深入实践，如瀑布流组件的性能优化方案。同时，候选人也表现出对新技术的学习能力，如对Vue3响应式原理的理解。面试最后，候选人就岗位内容和职业发展提出了针对性的问题，表现出良好的职业态度。