之前只是看文档或者大家都是这样认为key是要唯一标识，一般都写id,但是不知道为什么是这样要求的，直到研究vdom，domdiff，明白原因，在这里简单的给自己记录一下
希望看完文章可以明白vdom,domdiff,为什么v-for遍历的时候为什么key需要是唯一标识
vdom是什么？为何会存在vdom?
用js模拟DOM结构，虚拟DOM,有DOM的样子
因为DOM操作非常“昂贵”,这也是vdom存在的意义所在
减少重绘提高性能
vdom如下这样的结构：
现在设计一下场景来感觉一下vdom的好处
需求向表格里添加数据，修改某一项数据 ？
用jquery来实现：看看会遇到哪些问题？
jquery实现遇到的问题总结：
频繁的在操作DOM，是非常的消耗性能的，js运行效率低
尽量少的操作DOM，而不是推倒重来，不是清空重新添加 项目越复杂，影响就越严重 vdom即可解决这个问题
下面带着问题我们来看看vdom怎么实现
jquery和框架的区别
1，数据和视图的分离？
jquery中的结构和js的逻辑混在一起了，动态添加的结构都在js中写的
vue中的数据和视图是分开的，数据都放在data中
2，以数据驱动视图？（只改数据，不关心视图怎么变化，如果变了，视图随着改变） jquery是完全不存在的，直接修改的视图，操作DOM的 vue只是把data数据改变了，视图效果直接就会改变
来说说vdom的实现核心API
h函数就是用来生成虚拟dom结构
patch函数就是diff计算修改生成各种补丁
diff算法
什么是diff算法？
1,去繁就简
vdom为何用diff算法?
性能高，减少对DOM的频繁操作
diff算法的核心流程
patch函数，初始时把vnode直接添加到dom选择器里
如果oldVnode有值，然后对比oldVnode和newVnode把更新变化的修改
然后执行rerender
diff算法我只是简单的列出，它有很复杂的算法，大家可以自行搜索这方面的知识
现在应该就很清楚为什么在vue和react里遍历key必须写上一个唯一标识了吧，就是为了方便diff计算对比,我看项目中还是有不少人会写成index序号，那么来说一下写成序号存在的问题？
如果是index索引
span key=0 A
span key=1 B
如果当我把数据顺序变化时例如：
span key=0 B
span key=1 A
这样是用key=0和key=0相对比，所以当对比的时候内容都不同的，所以会重新来渲染
但是用id就不同了，会找id一样的来看是不是修改
因此需要key值用唯一的标识符
