大厂前端面试|# 开始
大厂面试会通过各种难题来试探你的技术深度，评估你的技术发展潜力，这是入职后确定级别、薪资的重要参考。所以，技术深度将决定你的“钱途”。本章将通过多个面试题，讲解前端面试常考的底层原理问题，涉及 JS Vue React Nodejs 等。
## 为何要考察
深挖你的技术“天花板”，看未来潜力和可培养性 —— 特别是对于刚毕业不就的新人。
如果面试通过了，大公司要定级（P6 还是 P7），其中技术深度就是很重要的参考标准。一个没有技术深度的人，不可能给高级别职称。
而且，那么多候选人，择优录取，肯定希望能招募到技术深度好的工程师。
## 考察重点
其实就是我们日常使用的技术，的一些深入。没有什么特别出格的。
- JS 相关原理
- Vue React 相关原理
## 注意事项
- 技术深度，就有那么 1-2 个方面即可。深了，就不可能全面
- 技术深度的题目不过关，也不一定就面试不通过
## 看几个面试题
列举几个代表性的题目，参考视频课程
Vue.js是一个流行的前端JavaScript框架，被广泛用于构建用户界面和单页应用程序。Vue的核心功能之一是其生命周期，它为开发者提供了多种生命周期钩子（hooks），以便在组件的不同阶段进行操作。生命周期钩子是Vue组件实例从创建到销毁过程中的特定时刻，它们为开发者提供了介入和执行代码的机会。
**Vue生命周期概念**
- `beforeCreate`：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时，无法访问`data`和`methods`中的方法。
- `created`：在实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测(data observer)，属性和方法的运算，`watch/event`事件回调。但是挂载阶段还没开始，`$el`属性目前不可见。
- `beforeMount`：在挂载开始之前被调用：相关的`render`函数首次被调用。此时，Vue实例已经完成编译模板，调用`render`函数生成虚拟DOM，但还没有开始渲染DOM。
- `mounted`：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了一个文档内的元素上，当`mounted`被调用时，`vm.$el`也在文档内。
- `beforeUpdate`：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
- `updated`：由于数据更改导致的虚拟DOM重新渲染和更新完毕之后被调用，组件DOM已经更新，可执行依赖于DOM的操作。但是要注意，不要在此处更改数据，因为这可能会导致无限循环的更新。
- `beforeDestroy`：实例销毁之前调用。在这一步，实例仍然完全可用，`this`仍然指向该实例。我们可以在该钩子函数中执行必要的清理操作。
- `destroyed`：Vue实例销毁后调用。调用后，所有的指令都解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
**生命周期钩子的注意事项**
- 在`beforeCreate`和`created`钩子中，Vue实例还未创建，因此无法访问`vm.$el`和`vm.$data`。
- 在`beforeMount`钩子中，模板已编译完成，但尚未被渲染到DOM中。
- 在`mounted`钩子中，可以安全地执行依赖于DOM的操作，因为此时组件已挂载到DOM上。
- `beforeUpdate`和`updated`钩子可以在数据变更导致DOM更新前后执行逻辑，但要小心无限循环。
- `beforeDestroy`和`destroyed`是清理工作的最佳位置，如取消订阅、定时器等。
**Vue生命周期中的连环问题**
- **操作DOM：** 当需要操作DOM，并确保所有子组件都已挂载完成时，可以使用`vm.$nextTick`方法。这个方法可以确保在下一次DOM更新循环之后执行代码。这在`mounted`和`updated`钩子中特别有用，因为这两个钩子并不保证所有子组件都挂载完成。
- **放置ajax请求：** 通常来说，`created`和`mounted`是放置ajax请求的两个选择。虽然从理论上讲，`created`会更快，但实际在`created`中发起请求会导致与组件渲染并行，可能会增加理解上的难度。而`mounted`在DOM渲染完成后执行，代码更加线性且易于理解，因此推荐使用`mounted`。
- **Composition API：** Vue 3引入了 Composition API，它提供了一种新的方式来组织和复用逻辑。在Composition API中，生命周期钩子变成了函数的形式，例如`onMounted`代替了原来的`mounted`。这样做的好处是，开发者可以在组件的任何地方组织和使用生命周期钩子，更灵活地进行逻辑复用。
在前端面试中，了解和掌握Vue的生命周期对于候选人来说是非常重要的，因为它不仅是Vue核心功能的一部分，也是深入理解Vue内部工作原理的关键。此外，对于大厂面试而言，深入的了解Vue生命周期有助于展示候选人的技术深度，这对于确定应聘者的能力水平和职位级别有重要影响。因此，对于希望在前端领域求职的开发者来说，全面掌握Vue生命周期的相关知识是必须的。
