这期内容当中小编将会给大家带来有关怎么在Vue页面渲染中使用key，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
问题分析
通过阅读代码结构，发现el-table-column通过template循环生成，由于template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上。有关表格数据渲染中key的作用如下：
key作为一个DOM节点的标识值，结合Diff算法可以实现对节点的复用。(key相同的节点会被复用)；
只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。
同时，template标签不支持:key属性，
注意： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。
解决方法
既然template标签不支持key属性，可通过在el-table-column标签加入:key="Math.random()"属性，这个key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，依次来提升页面渲染性能。如果不更新这个key的话,显示/隐藏列的时候,部分DOM不会重新渲染,导致table变化时候内容错乱。
拓展阅读
一、key的作用
前文已经讲到，作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)
只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。那么，key使用id与index的区别又是什么呢？
二、key使用id与index的区别
不推荐使用index作为key，因为这种做法会导致某些节点被错误地原地复用，具体如下：
性能损耗：列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于key没发挥作用）。
出现错误：某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
性能损耗
列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于key没发挥作用）
需要注意的是，变动项往后的所有列表节点的更新本质是节点属性的更新，节点本身会被复用。
& lt; template>
,& lt; div>
,& lt; div v=?项目,,指数),拷贝arr",:关键=癷ndex 或,item.id"比;
,,{{item.data}}
,& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;helloworld # 39;
,数据(){
,return {
加勒比海盗:才能,Array.from(10000}{长度:,,,(v, i),=祝辞,{return {id:,我,,数据:,我}})
,}
},
,安装(){
,setTimeout(()=祝辞{/*,才能
1只才能this.shiftArr()//,删除首项
,或
2只才能this.unShiftArr()//,在首部插入新项
,*/,},1000)
},
,方法:{
,shiftArr () {
this.arr.shift才能();
},
,unshiftArr () {
this.arr.unshift才能({id:, 1,数据:,1});
,}
,}
}
& lt;/script> 上边的例子很简单,就是v代表渲染一个长度为10000的列表,然后在Vue安装1 s后,执行一个删除列表首项或在列表头插入新项,观察两种关键绑定的具体页面更新开销。
页面开销使用铬的性能选项卡来测算
删除列表首项
& lt; !——,测试代码,——比;
& lt; template>
,& lt; div>
,& lt; button @click=皌est"在删除列表第一项& lt;/button>
,& lt; div v=?项目,,指数),拷贝arr",:关键=癷ndex 或,item.id"比;
& lt;才能input 类型=癱heckbox",/比;
,,{{item.data}}
,& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;helloworld # 39;
,数据(){
,return {
,,加勒比海盗:Array.from({长度:5},,(我)v,,,=祝辞,{return {id:,我,,数据:,我}})
,}
},
,方法:{
,测试(){
this.arr.shift才能();
,}
,}
}
& lt;/script>
