总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
一、前言
当 Vue.js
用v-for
更新已渲染过的元素列表时,它默认用“就地复用
”策略。如果数据项的顺序被改变,Vue
将不会移动 DOM
元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
二、key 的两种应用场景
2.1 在列表渲染时使用 key 属性
假设Vue
实例的data
属性中有一个叫numbers
的变量,它的值是[1, 2, 3, 7, 8, 9]:
<div v-for="num in numbers">
{{num}}
</div>
这种情况下应当是渲染了6个<div>
元素,其中的内容分别对应numbers中6个数字,此时如果numbers变成了[0, 1, 2, 3, 7, 8, 9],即在数组头部插入了一个数字0,在没有key属性的情况下,渲染输出的更新步骤是这样的:
原先内容为1的
<div>
元素内容变成0,原先内容为2的<div>
元素内容变成1,……以此类推,最后新增一个<div>
元素,内容为9。
在这种情况下,Vue
会通过改变原来元素的内容和增加/减少元素来完成这个改变,因为没有key
属性,Vue
无法跟踪每个节点,只能通过这样的方法来完成变更。
让我们对以上代码进行一个小修改:
<div v-for="(num, index) in numbers" :key="index">
{{num}}
</div>
这里用index
变量,根据列表渲染的规则,它实际上对应了数组中每个元素的索引,这样做的好处是它可以使得每个元素的key
值都不同,这是很重要的,如果我们要利用key
属性的优点,必须保证同一父元素的所有子元素有不同的key
属性。
此时如果numbers从[1, 2, 3, 7, 8, 9]变成了[0, 1, 2, 3, 7, 8, 9],渲染输出的更新步骤就变化了:
新增一个
<div>
元素,它的内容为0,并将它插入原先内容为1的元素之前。
在有了key
属性之后,Vue
会记住元素顺序,并根据这个顺序在适当位置插入/删除元素来完成更新,这种方法比没有key
属性的就地复用策略效率更高。
总体来说,当使用列表渲染时,永远添加key
属性,这样可以提高列表渲染的效率,提高页面性能。但是key
取值不建议使用index
,原因详参博文《Vue进阶(幺伍幺):Vue 应用key提升页面渲染性能》。
2.2 使用 key 属性强制替换元素
key
属性还有另外一种使用方法,即强制替换元素,从而可以触发组件的生命周期钩子
或者触发过渡
。因为当key
改变时,Vue
认为一个新的元素产生了,从而会新插入一个元素来替换掉原有的元素。
借用官方文档上的例子:
总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总