Vue中key的作用（内部原理 ）在diff算法中起到的作用，详细讲解

题外话：本人之前就想弄明白diff算法在vue哪里用到了，网上查了查都是直接讲解diff算法的深度理解和怎么实现的，而我就一开始想明白怎么用、有什么用，还不太想马上知道diff算法深度的东西。查到最后还是一头雾水，只知道了diff算法用来比较旧的虚拟DOM和新的虚拟DOM。

        直到我在b站自学，看张天禹老师的vue教程，听到讲解key在vue中的作用的时候，发现讲到了diff算法，然后就突然茅塞顿开，解决了以前困扰我的问题，就想着写个文章，希望可以帮助到别人，而我写的东西不会涉及到很深的原理，因为我也是个小白，写不出来（流泪）。（最后张天禹老师YYDS）

Vue中key的作用

1.首先先要知道，key在vue中是虚拟DOM的标识符。

  如果不知道什么是虚拟DOM，就可以理解这样理解（如下）：

         你有一组数据，你要通过vue的v-for循环显示到页面中

//要遍历显示到页面的数据（要显示到页面，就相当于创建dom放到页面中）
persons: [
   { id: '001', name: '张三', age: 18 },
   { id: '002', name: '李四', age: 19 },
   { id: '003', name: '王五', age: 20 }
]
//实现遍历显示的代码
<div id="root">
    <h2>人员列表</h2>
    <ul>
        <li v-for='(item,index) in persons' :key='index'>
            {{item.name}} -- {{item.age}}
        </li>
    </ul>
</div>

然后其过程并不是直接把数据循环显示到页面的，它会先在中间创建一层虚拟DOM，而key绑定的值就是这些虚拟DOM的标识符，最后把虚拟DOM在转换成真实DOM，把数据显示到页面上。

        你会不会觉得虚拟DOM这步骤好多余啊，直接把数据创建成真实DOM显示到页面不好嘛？其实直接创建真实DOM是可以，没问题。但是如果数据变了，就又要重新创建一边DOM，效率有点低啊，而通过虚拟DOM创建的真实DOM就可以解决这个问题。

 (小提示：如果你v-for循环没有写 :key也是可以的，vue会默认给key绑定为索引值)

2.然后Vue中的key作用就是可以通过它进行新/旧虚拟DOM的比较

         前面废话这么多，就是为了说明这个。vue中为什么引用虚拟DOM，而不是直接把数据创建真实的DOM显示在页面中呢？原因就是如果数据发生改变了，通过虚拟DOM创建的真实DOM可以提高效率，为什么这么说，如下：

 

        如上图的，数据发生了改变（增、改）时，会生成新的虚拟DOM，新的虚拟DOM会创建真实DOM，但在创建之前，会进行diff算法比较两个新旧虚拟DOM。

diff算法比较后，会出现3种情况：

（1）如果新虚拟DOM找到了与旧虚拟DOM相同的key，但新旧虚拟DOM内容没有变，新的虚拟DOM就不用创建真实DOM，直接复用之前旧虚拟DOM创建的真实DOM。

（2）如果新虚拟DOM找到了与旧虚拟DOM相同的key，但新旧虚拟DOM内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

（3）如果新虚拟DOM中未找到与旧虚拟DOM相同的key，则创建新的真实DOM，随后渲染到页面

最后总结，key正是diff算法的关键，通过这个key可以作为桥梁，连接起新旧两个虚拟DOM。