Vue进阶（幺伍零）：巧用 key 提升页面渲染性能及触发生命周期函数_vue key 变化 出发 transition

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认为一个新的元素产生了，从而会新插入一个元素来替换掉原有的元素。

借用官方文档上的例子：

<transition>
  <span :key="text">{{text}}</span>
</transition>

这里如果text发生改变，整个<span>元素会发生更新，因为当text改变时，这个元素的key属性就发生了改变，在渲染更新时，Vue会认为这里新产生了一个元素，而老的元素由于key不存在了，所以会被删除，从而触发了过渡。

假如没有key属性：

### 总结

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

*   框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

*   算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯



*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
    喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0