初级前端面试（二面面试题及答案）

1. 最近项目中遇到什么问题，及解决方案？

答案：

• 在最近的项目中，我们遇到了页面加载速度慢的问题。通过分析，发现是某些大型图片资源导致的问题。解决方案是优化图片资源，使用压缩工具和CDN加速服务，同时采用懒加载技术，只在需要时加载图片资源。

2. 最近有学习什么新技术？

答案：

• 最近我学习了Vue 3的新特性，包括Composition API和Teleport功能。这些新特性使得Vue 3在组件逻辑复用和DOM操作方面更加灵活和强大。

3. 平时自己逛什么社区？

答案：

• 我平时会逛掘金、SegmentFault和GitHub等前端技术社区，这些社区提供了丰富的技术文章、开源项目和问题解答，对我的学习和工作有很大帮助。

4. 你对加班怎么看？

答案：

• 我认为加班是项目需要时的一种临时措施，但不应该成为常态。在合理的工作时间内高效完成任务是更重要的。如果确实需要加班，我会尽力配合团队完成工作。

5. 你还有什么想要了解的吗？

答案：

• 我想了解一下贵公司的技术团队架构和氛围，以及未来项目的发展方向和规划。这些信息对我更好地融入团队和开展工作很有帮助。

1. 单页面应用和多页面应用的优缺点？

答案：

• 单页应用（SPA）：

  优点：页面切换快，因为不需要重新加载HTML文件，减少了HTTP请求。

  缺点：首屏加载时间长，SEO效果差，因为搜索引擎难以抓取通过JavaScript渲染的内容。

• 多页应用（MPA）：

  优点：首屏加载速度快，因为每次访问页面都会直接返回HTML文件。SEO效果好，因为搜索引擎可以识别HTML中的内容。

  缺点：页面切换慢，因为每次切换都需要发送HTTP请求。

衍生问题：如何解决单页及多页面各自优点的问题？

答案：

• 可以采用服务端渲染（SSR）技术，结合单页应用和多页应用的优点。服务端渲染在页面首次加载时生成完整的HTML内容，同时保留客户端渲染的灵活性。

2. 说一下vue 对应的生命周期？

答案：

• <keep-alive>是Vue中用于缓存组件状态的指令。当组件被包裹在<keep-alive>中时，其生命周期钩子函数会有所不同。具体来说，组件在第一次进入时，会依次调用created、mounted、activated钩子函数；当组件被切换出去时，会调用deactivated钩子函数；当组件再次被切换回来时，会调用activated钩子函数，而不会重新调用created和mounted。

3. vue懒加载

答案：

• Vue懒加载主要有三种方式：

  异步组件：使用Vue.component的异步选项或defineAsyncComponent函数定义异步组件。

  ES6提案的import()：在路由配置中使用import()函数动态导入组件。

  Webpack的require.ensure()：在Webpack配置中使用require.ensure()方法实现代码分割和懒加载。

4. 说一下react的高阶组件？

答案：

• 高阶组件（HOC）是一个以组件为参数并返回一个新组件的函数。它常用于复用组件逻辑、修改组件行为或向组件注入额外的props。例如，Redux的connect函数就是一个高阶组件，它用于将Redux store与React组件连接起来。

5. 说一下自己对vdom的了解？

答案：

• Virtual DOM（虚拟DOM）是一种通过JavaScript对象来描述真实DOM结构的技术。它允许我们在内存中构建和操作DOM树，然后一次性地将这些更改应用到真实DOM上，从而提高页面渲染的效率。Vue和React等前端框架都采用了虚拟DOM技术。

6. mvvm的双向绑定原理？

答案：

• MVVM（Model-View-ViewModel）双向绑定原理主要采用了数据劫持结合发布者-订阅者模式的方式。通过Object.defineProperty()方法劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。这样，当数据发生变化时，视图会自动更新；当视图发生变化时（如用户输入），数据也会相应更新。

7. vue-router的路由模式?

答案：

• Vue-router提供了两种路由模式：hash模式和history模式。

  hash模式：使用URL中的#符号来表示路由路径。这种方式兼容性好，但不美观。

  history模式：使用HTML5的History API来实现无刷新跳转。这种方式更加美观，但需要服务器支持（配置404重定向到index.html）。

8. 说一下redux?

答案：

• Redux是一个应用数据流框架，主要用于解决组件间状态共享的问题。它主要包括三个核心方法：action、store和reducer。

  action：一个包含{ type, payload }的对象，用于描述要执行的操作。

  store：整个应用只有一个唯一的store，用于存储应用的状态树。

  reducer：一个纯函数，接受当前的state和action作为参数，返回一个新的state。

9. 说几个自己常用的vuex的api?

答案：

• store.registerModule('c', {})：注册一个模块。
• store.unregisterModule('c')：解绑一个模块。
• store.subscribe()：订阅，每次mutations被调用时，这个API都会被调用。
• store.subscribeAction()：监听actions。
• store.watch()：每次state改变之后都会调用。

10. 谈谈vue和react？

答案：

• 本质区别：

  Vue：本质是MVVM框架，由MVC发展而来，使用模板语法。

  React：本质是前端组件化框架，由后端组件化发展而来，使用JSX语法。

• 共同点：

  都支持组件化。

  都是数据驱动视图。

• 个人看法：

  模板语法上，更倾向于JSX，因为它更接近JavaScript语法。

  模板分离上，更倾向于Vue，因为数据和视图分离得更彻底。

  组件化上，更倾向于React，因为它做得更彻底。

  国内使用上，首推Vue，因为文档更易读、易学、社区够大。如果团队水平较高，推荐使用React。大型项目用React，小型项目用Vue。

1. 快速排序、选择排序、希尔排序、冒泡排序、波兰式和逆波兰式

答案：

• 快速排序：通过选择一个基准元素，将数组分为两部分，递归地对这两部分进行排序。
• 选择排序：每次从未排序部分选择最小（或最大）的元素，放到已排序部分的末尾。
• 希尔排序：是插入排序的一种改进版本，通过比较相距一定间隔的元素来工作，然后逐渐缩小间隔，直到整个数组有序。
• 冒泡排序：通过重复地遍历要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。
• 波兰式和逆波兰式：波兰式（前缀表达式）和逆波兰式（后缀表达式）是两种表示算术表达式的方法。在波兰式中，操作符位于操作数之前；在逆波兰式中，操作符位于操作数之后。

1. 为什么想要换工作？

答案：

• 我希望能够在新的工作环境中学习更多的技能和知识，提升自己的专业能力。同时，我也希望能够在更大的平台上发挥自己的优势，为公司的发展做出贡献。

2. 对薪水自己有怎样的期待？

答案：

• 我希望能够在合理的范围内获得与我的能力和经验相匹配的薪水。当然，我也会根据公司的实际情况和行业标准进行适当调整。

3. 对未来有一个怎样的规划？

答案：

• 在短期内，我希望能够尽快适应新的工作环境，熟悉公司的业务流程和技术栈。同时，我也计划参加一些培训课程和技术交流活动，提升自己的专业技能和团队协作能力。
• 在长期内，我希望能够在公司中担任更重要的角色，承担更多的责任和挑战。我也希望能够通过不断学习和实践，成为行业内的专家型人才。

4. 你还有什么想要了解的吗？

答案：

• 我想了解一下公司的福利待遇、晋升机制以及团队文化等方面的情况。这些信息对我更好地了解公司和规划自己的职业发展很有帮助。