更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等
开源分享：docs.qq.com/doc/DSmRnRG… + - 2.1 性能损耗 - 2.2 出现错误 + 三、拓展阅读
一、key 的作用
作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)
只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。
二、key 使用 id 与 index 的区别
不推荐使用index作为key，因为这种做法会导致某些节点被错误地原地复用，具体如下：
性能损耗：列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于
key没发挥作用）。出现错误：某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
2.1 性能损耗
列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于key没发挥作用）。
需要注意的是，变动项往后所有列表节点的更新本质是节点属性的更新，节点本身会被复用。
<!-- 测试代码 -->
<template>
<div>
<div v-for="(item, index) in arr" :key="index 或 item.id">
{{item.data}}
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
arr: Array.from({length: 10000}, (v, i) => {return {id: i, data: i}})
}
},
mounted(){
setTimeout(()=>{
/\*
1. this.shiftArr() // 删除首项
或
2. this.unShiftArr() // 在首部插入新项
\*/
}, 1000)
},
methods: {
shiftArr(){
this.arr.shift();
},
unshiftArr(){
this.arr.unshift({id: -1, data: -1});
}
}
}
</script>
上边的例子很简单，就是v-for渲染一个长度为10000的列表，然后在Vue mounted 1s后，执行一个删除列表首项或在列表头插入新项，观察两种key绑定的具体页面更新开销。
页面开销使用chrome的performance选项卡来测算。
删除列表首项
列表头 unshift 新元素
2.2 出现错误
某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
<!-- 测试代码 -->
<template>
<div>
<button @click="test">删除列表第一项</button>
<div v-for="(item, index) in arr" :key="index 或 item.id">
<input type="checkbox" />
{{item.data}}
</div>
</div>
</template>
# 判断
回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。
第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。
第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。
前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，**我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！**
