乐趣区

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

jiezi

金三银四，怎么能少了本菜😁😁。陆续面试了几家中小公司，正好借此机会好好恶补一下根底，要是能找到一个适合的工作那就更完满啦。整顿了近一次面试复盘笔记，为正在找工作的小伙伴们，提供一丢丢的帮忙。祝大家都能找到 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;
}
复制代码

这个是优化过后的冒泡排序。用了一个 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;}
复制代码

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

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

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


因为篇幅起因，如有须要以上残缺学习笔记 PDF，能够点击这里收费自取！！

整顿不易，感觉有帮忙的敌人能够帮忙点赞分享反对一下小编~ 小编在这谢谢大家啦！

退出移动版