第一次前端面试复盘（北森一面凉经）

本文链接：https://blog.csdn.net/lijunyan5/article/details/126277786

时间：2022.08.10晚

1.自我介绍

2.谈谈你的项目，主要做的什么，以及它的业务背景。

（面试官：接下来我们分别进行几个话题，能聊多深聊多深...知道多少说多少....）

3.谈谈你对vue的生命周期的理解？

父子组件的执行顺序是什么？

为什么父组件状态先生成，但后销毁？

如何监听子组件的生命周期状态？（这个问题没有回答上来...）

答：有两种监听子组件生命周期的方法：1.父子组件通信的方式，用$emit,就是在父组件上封装了一个v-on的事件用来监听子组件的事件，只不过事件名和钩子函数同名，当子组件发布时，即执行this.$emit('钩子函数created/mounted',参数)时，在父组件则可以监听到，然后执行回调。2.@hook 方法可以监听子组件的任何的生命周期。子组件不需要发布。直接在父组件中，插入子组件的地方，使用@hook.声明周期函数名="函数名"即可.

$emit的例子：

父组件：
<template>
  <div>
    <child-component @mounted="handleDoSomething"></child-component>
  </div>
</template>
<script>
export default Vue.component("HelloWorld", {
 ...
  methods:{
    handleDoSomething(data){
      console.log('监听到子组件生命周期钩子函数mounted时，触发该回调',data)
    }
  },
  components:{
    "child-component":ChildComponent
  }
});
</script>
子组件：
<script>
export default {
   ...
    mounted(){
        this.$emit('mounted','mounted 触发了')
    },
}
</script>

hook的例子：

<template>
  <div>
    <child-component @hook:mounted="handleDoSomething"></child-component>
  </div>
</template>
<script>
export default Vue.component("HelloWorld", {
 ...
  methods:{
    handleDoSomething(data){
      console.log('监听到子组件生命周期钩子函数mounted时，触发该回调',data)
    }
  },
  components:{
    "child-component":ChildComponent
  }
});
</script>

4.有一个tab键，如何通过切换tab来实现背景颜色或者其他样式的转换？

（我说了两种方案，一个用动态class，一个用v-show；面试官说可以实现，但后续要优化的操作太多，有没有别的？emm没想出来）

5.谈谈你对promise的理解？

回调地狱怎么理解？

promise是如何解决的？

（最后面试官问的地方不会，但忘记具体问的啥了，依稀记得是用settimeout不断进行异步嵌套会有回调地狱危险，那promise是怎么进行解决的，它是在每次then后再用settimeout吗？那这样不是没什么改变吗。。？）

6.手动实现一个promise.all的功能

（菜，这个地方没有复习到，手写代码的部分还没来得及去看）（我说不大会写，面试官说，可以说说思路；我说可以用计数，有promise状态成功执行后就加一，直到计数值等于总数就返回；然后面试官点头说就着这个思路写写。。然后，，依旧不知道咋写）

7.反问

（此时心情已经down了，就随意的问了下底层源码是不是看？问完就觉得是个废话，面试官很有耐心的跟我说，当你工作两三年，底层是必要。。。）

总结：面试官全程非常和蔼，语气柔和，体验很好。但对我来说是个惨痛经历，都是半知半解的状态。。。让我知道，我还有很长的路要走，虽然这次面试就是为了查缺补漏，不追求结果，但还是小小的emo了，感觉自己太菜了，小李还要加油鸭！

面试考察的知识点一个是四个部分，项目、vue、js,css，手写代码。