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

青旅半醒 2022-09-12 03:53 186阅读 0赞

**题外话**：本人之前就想弄明白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，把数据显示到页面上。![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

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

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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

如上图的，数据发生了改变（增、改）时，会生成新的虚拟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。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/80a77af47ea14eb3a046a45fd84a7394.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2xpbldhbmc_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/9c962bffb9ae4a25a377ec4b0bb1df4e.png