关于react与vue中的key
之前在学习react的时候，常常遇到循环渲染组件时会提示需要在循环组件中加上key属性，比如有一组列表：
import React, { Component } from 'react';export default calss MainApp extends Component {
state = {
student: [
{
name: 'Jenny',
id: 'a001'
},
{
name: 'Jerry',
id: 'a002'
},
] }
render() {
return (
<div>
<ul>
{
this.state.student.map(item => {
// key是必须的属性，不然浏览器会抛出错误提示
return (<li key={item.id}>{item.name}</li>)
})
}
</ul>
</div>
)
}
}
可能对这个key不是太了解，或者也不许要太深入地去了解它，只知道在循环渲染组件时，随手加上这个属性就好。摘自网上的的文章的总结，key的作用为
key的作用主要是为了高效的更新虚拟DOM
虽然不是很懂，但也装作大切大悟的样子。key是一个给框架内部用的，我们只管给它加上去就好。
Vue中的key
同样有一个vue的组件：
<template>
<div>
<ul>
<!-- key是必须的属性，不然浏览器会抛出错误提示 -->
<li v-for="itme in student" :key={item.id}>{{item.name}}</li>
</ul>
</div>
</template><script>
import vue from 'vue';
import { Component } from 'vue-property-decorator'
@Component
export default calss MainApp extends vue {
student = [
{
name: 'Jenny',
id: 'a001'
},
{
name: 'Jerry',
id: 'a002'
},
]}
</script>
同样的，回到vue中的key,其实也类似，解释key的作用，就不得不介绍一下虚拟DOM的diff算法了…算了，我也不是很懂
简单理解就是react与vue内部判断组件的一个标识，用于更新或者重用组件的一个重要属性
更新
key用于更新：是框架内部的算法实现，一两句话也说不清楚（主要是我也不懂这个算法）,简单理解为当数据更新了，框架内部会判断更新页面哪些DOM元素需要更新删除等操作；
重用
key用于组件重用：其实key不止是在map或者v-for中使用，我们也也可以在其他组件上使用这个属性（至于哪个组件可以加，小孩子才做选择，我们的目标是全都加！）,当然加了貌似也没什么毛病，只是加了显得有些多余！
在做SPA的时候，我们都会有一个主组件App.vue：
<template>
<div id="app">
