vue使用key,vue中key的作用
本文主要介绍key在Vue页面渲染中应用的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。让我们和边肖一起学习。
引言
在前端项目开发过程中，el-table显示的结果列以组件的形式引入，部分字段采用formatter方法转码，结果字段的字段显示/隐藏的控制也以组件的形式引入。前端控制字段的显示属性时，发现代码值转换和字段信息显示存在问题。
问题分析
通过阅读代码结构，我们发现el-table-column是由模板循环生成的。由于模板是模板的占位符，它可以帮助我们包装元素，但在循环过程中，模板不会呈现在页面上。key在表格数据渲染中的作用如下：
key作为DOM节点的标识值，结合Diff算法可以重用。(具有相同键的节点将被重用)；
只有当key(或者其他导致isSameNode被判定为false的东西)发生变化时，才会触发节点的重新渲染。否则，Vue将重用以前的节点，并通过更改节点的属性来更新节点。
同时，模板标签不支持：key属性。
注意： Vue实例绑定的元素内的模板标记不支持v-show指令，即v-show=false 对模板标记没有影响。然而，此时模板标签支持诸如v-if、v-else-if、v-else和v-for之类的指令。
解决方法
因为模板标签不支持key属性，所以可以在el-table-column标签中添加属性：key=Math.random()。这个关键属性是vue的一个特殊属性，主要用在Vue的虚拟DOM算法中，在新旧节点对比时识别VNodes，进而可以提高页面渲染性能。如果不更新这个键，在显示/隐藏列时，DOM的一部分将不会被重新渲染，这将导致表改变时内容混乱。
拓展阅读
一、key的作用
如前所述，作为一个DOM节点的标识值，结合Diff算法可以实现节点的重用。(具有相同键的节点将被重用。)
只有当key(或者其他导致isSameNode被判定为false的东西)发生变化时，才会触发节点的重新渲染。否则，Vue将重用以前的节点，并通过更改节点的属性来更新节点。那么，key使用id和index有什么区别呢？
二、key使用id与index的区别
不建议使用index作为键，因为这种做法会导致某些节点被错误地就地重用，如下所示：
性能损失：当列表被渲染时，改变的条目之后的所有列表节点(内容)将被更新(相当于键不起作用)。
出现错误：一些节点在错误的位置被多路复用。(例如，在列表项中使用复选框时)
性能损耗
当呈现列表时，更改项之后的所有列表节点(内容)都将被更新(相当于键不起作用)。
需要注意的是，变更项后所有列表节点的更新本质上是节点属性的更新，节点本身会被重用。
！-测试代码-
模板
差异
arr中的Div-for= (item，index :key= index或item.id
{{item.data}}
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data(){
返回{
arr: Array.from({length: 10000}，(v，i)={return {id: i，data: i}})
}
},
已安装(){
setTimeout(()={
/*
1.this.shiftArr()//删除第一项。
或者
2.this.unShiftArr()//在头中插入一个新项目。
*/
}, 1000)
},
方法：{
shiftArr(){
this . arr . shift()；
},
un shiftar(){
this.arr.unshift({id: -1，data:-1 })；
}
}
}
/脚本
上面的例子很简单，就是v-for渲染一个长度为10000的列表，然后在Vue挂载1s后，删除列表的第一项或者在列表头插入一个新项，观察两个键绑定的具体页面更新开销。
页面开销是用chrome的性能标签来衡量的。
删除列表中的第一项
标题未移动新元素
出现错误
一些节点在错误的位置被多路复用。(例如，在列表项中使用复选框时)
！-测试代码-
模板
差异
Button @click=test 删除列表/按钮中的第一项
arr中的Div-for= (item，index :key= index或item.id
输入类型=复选框/
{{item.data}}
/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data(){
返回{
arr: Array.from({length: 5}，(v，i)={return {id: i，data: i}})
}
},
方法：{
测试(){
this . arr . shift()；
}
}
}
/脚本
总结
关于key在Vue页面渲染中的应用的这篇文章到此为止。更多关于key在Vue页面渲染中的应用，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。