前端面试复盘：vue技术面没有难倒我，hr面却是一把挂

金三银四，怎么能少了本菜😁😁。陆续面试了几家中小公司，正好借此机会好好恶补一下基础，要是能找到一个合适的工作那就更完美啦。整理了近一次面试复盘笔记，为正在找工作的小伙伴们，提供一丢丢的帮助。祝大家都能找到money多多的工作💰💰。

概况

• 公司：坐标深圳。
• 面试官：特有礼貌，还先自我介绍了。
• 面试结果：应该是hr面没过（跳的太频繁了，简历难看🤣🤣）。
• 面试感受：技术面还行,hr面很难受。

面试题

说明：✔ 代表后面有关于该问题的重新整理。

1. 介绍一下自己之前做过的项目。
2. Vue 的生命周期。✔
3. Create 和 beforeMount 他们两之间有什么区别。
4. Vue 组件通信。✔
5. v-if 和 v-show 的区别以及使用场景。✔
6. nextTick 的使用场景和作用。✔
7. Vue 中的 key 有什么作用。✔
8. 计算属性和 watch 的区别。✔
9. 子元素上下左右居中。
10. 生成一条0.5px的线。✔
11. 自适应方案。
12. rem 和 rm 的区别。✔
13. vw 和百分比有什么区别。✔
14. 合并两个数组。✔
15. 数组去重，冒泡排序。✔
16. Object 去掉其中一项属性， delete 删除对象有什么影响。✔
17. 深浅拷贝。
18. 防抖节流 。
19. 从0+100怎么实现。✔
20. 一到一百个相同的请求，后面的依赖前面一个的结果，现在要拿到第一百个结果要怎么做。
21. 假如你在爬楼梯，楼梯一共有N层，但你每次爬楼梯只能走一步、两步或三步，计算共有多少种走法，怎么打印出所有走法？

Vue的生命周期。

组件生命周期

1. new Vue() ，初始化事件和生命周期
2. beforeCreate （ $el 和 data 都是 undefined ）
3. 初始化数据和方法（ data 和 props 的响应式处理， mehods 方法声明）
4. created （ $el 是 undefined ，修改 data 不触发 update ）
5. 判断有没有 el 项（ vm.$mount(el) ），判断有没有模板(没有将el外层的HTML当模板)，将模板编译成渲染函数，返回虚拟DOM
6. beforeMounted （ $el 是虚拟 DOM ，修改 data 不触发 update ）
7. 创建正式 DOM 替换虚拟 DOM ，挂载到页面指定容器显示
8. mounted （可操作真实 DOM ）
9. 数据变更
10. beforeUpdate
11. 重新渲染虚拟 DOM 并通过 DIFF 算法比较差异更新真实 DOM
12. updated
13. 调用 vm.$destory()
14. beforeDestory （清理计时器、事件）
15. 移除数据监听、事件监听和子组件
16. destoryed （实例不可用）

keep-alive生命周期
被 keep-alive 包裹的组件有 activated 和 deactivated 两个生命周期。如 <keep-alive> 包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的 created 和 activated 生命周期函数都会被执行，切换到组件B，这时组件A的 deactivated 的生命周期函数会被触发；在切换回组件A，组件A的 activated 生命周期函数会被触发，但是它的 created 生命周期函数不会被触发了。

vue组件通信。

1. 父子间通信:父亲提供数据通过属性 props 传给儿子；儿子通过 $on 绑父亲的事件，再通过 $emit 触发自己的事件（发布订阅）
2. 利用父子关系 $parent 、 $children ，
3. 父组件提供数据，子组件注入。 provide 、 inject ，插件用得多。
4. ref 获取组件实例，调用组件的属性、方法
5. 跨组件通信 Event Bus （ Vue.prototype.bus=newVue ）基于 on 与 $emit
6. vuex 状态管理实现通信

v-if和v-show的区别以及使用场景。

区别
v-if 是删除生成 dom , v-show 是切换 dispaly 的状态。
使用场景

• v-if

1. 某一块代码在运行时条件很少改变，使用 v-if 较好 ( v-if 有更高的切换开销)
2. 在组件上使用 v-if 可触发组件的生命周期函数
3. 与 transition 结合使用 当条件变化时该指令可以触发过渡效果(用于动画切换)

• v-show

1. 需要非常频繁地切换某块代码，使用 v-show 渲染
2. 当条件变化时该指令触发过渡效果(用于动画切换)

nextTick的使用场景和作用。

使用场景
例：一个子组件通过v-if控制隐藏显示 <t v-if='show'><t/> ，当修改完显示状态后，立马通过ref去操作子组件的方法，这个时候会报错，原因在于子组件此时可能还未渲染完成，这个时候使用 nextTick 可以解决，他会在 dom 更新完成之后再去调用。
作用
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

vue中的key有什么作用。

• key 会用在虚拟 DOM 算法（ diff 算法）中，用来辨别新旧节点。
• 不带 key 的时候会最大限度减少元素的变动，尽可能用相同元素。（就地复用）
• 带 key 的时候，会基于相同的 key 来进行排列。（相同的复用）
• 带 key 还能触发过渡效果，以及触发组件的生命周期

计算属性和watch的区别。

• 处理数据的场景不同，监听器( watch )适合一个数据影响多个数据，计算属性适合一个数据受多个数据影响
• 计算属性有缓存性，计算所得的值如果没有变化不会重复执行,但是 watch 会重复执行
• 监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况

生成一条0.5px的线。

rem和rm的区别。

• rem 是相对于根元素字体大小
• em 是相对于自身字体大小

vw和百分比有什么区别。

• 百分比是相对高度，相对于他的父元素而言。
• vw 永远都是相对于视窗大小的。

合并两个数组。

1. arr1.concat(arr2)
2. [...arr1,...arr2]
3. 循环

数组去重，冒泡排序。

数组去重

1. Array.from(new Set(arr))
2. [...new Set(arr)]
   3. for 循环嵌套，利用 splice 去重
   4. 新建数组，利用 indexOf 或者 includes 去重
   5. 先用 sort 排序，然后用一个指针从第 0 位开始，配合 while 循环去重
   冒泡排序

function bubbleSort (arr) {
  for (let i = 0; i < arr.length; i++) {
    let flag = true;
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        flag = false;
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
    if (flag) break;
  }
  return arr;
}
复制代码

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

这个是优化过后的冒泡排序。用了一个 flag 来优化，它的意思是：如果某一次循环中没有交换过元素，那么意味着排序已经完成了。

冒泡排序总会执行 (N-1)+(N-2)+(N-3)+..+2+1 趟，但如果运行到当中某一趟时排序已经完成，或者输入的是一个有序数组，那么后边的比较就都是多余的，为了避免这种情况，我们增加一个 flag ，判断排序是否在中途就已经完成（也就是判断有无发生元素交换）

Object去掉其中一项属性，delete删除对象有什么影响。

delete Object['name']
delete 只能删除自有属性，不会影响原型链上的属性

从0+100怎么实现。

1、使用 for 循环从1加到100的总和

let sum=0;
for(var i=0;i<=100;i++){
    sum+=i;
}
复制代码

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

2、使用 while 函数从1加到1000的总和

let i=0, sum=0;
while(i<=100){
    sum+=i++;
}
复制代码

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

技术面的还行是因为刷了很多前端面试题，hr面还是想说大家不要和我一样跳槽频繁了，这个是硬伤。我把刷的面试题做了一份整理， 免费分享 给大家，希望大家技术面和hr面双丰收！

由于篇幅原因，如有需要以上完整学习笔记PDF，可以 点击这里免费自取 ！！

整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下小编~小编在这谢谢大家啦！