vue中的key的作用简述(vue中key的作用和使用场景)

边肖，和你分享一下钥匙在vue的用法。希望大家看完这篇文章后有所收获。我们一起讨论一下吧！

钥匙有什么用？

先看官方解释：

关键属性主要用于vue的虚拟DOM算法(diff算法)中，在比较新旧节点时识别VNodes。

当不使用key时，Vue将使用一种算法来最小化动态元素，并尝试尽可能地在适当的位置修改/重用相同类型的元素。

使用键时，它会根据键的变化重新排列元素的顺序，并删除/销毁不存在键的元素。

面对这些迷茫的概念，不要着急，看一次就有印象，然后一步步深入分析关键是为了什么。

1 vnode 虚拟节点

虚拟节点，虚拟节点

还记得DOM树中的元素吗？文档、元素、节点

什么是虚拟节点？

简单地说，vue要呈现给页面的节点是虚拟节点。

templateid='my-app '

div class=' title ' style=' font-size :30 px；color:red哈哈/div

/template div这里是一个虚拟节点，它以这种形式存在于vue中。

const vnode={ 0

type:'div '，

props: {

类别： '标题'，

style:{

字体大小' :'30px '，

颜色： '红色'，

},

},

儿童： '哈哈哈'，

};我不明白的可能是孩子的属性，因为现在div没有子元素，所以值只有‘哈哈哈’。如果有子元素，那么它将一直嵌套到最后一个节点，例如

儿童：[

{

//子元素

},

{

//子元素

}

不间断空格

;  ],

2 vDOM 虚拟DOM

和真实DOM一样, 有真实节点就有真实DOM, 那么有虚拟节点, 就有虚拟DOM

当然虚拟DOM tree也一样咯, 也有叫VNode tree的, 一个意思, 这个不需要纠结, 大概是下面这样

  <template id="my-app">
    <div>
      <div>
        <p></p>
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </template>

转换成虚拟DOM树 :

虚拟DOM在渲染成真实DOM时, 不一定是完全一样的, 这里涉及到组件的问题, 后面有机会在讲

3 渲染过程

4 案例 : 插入f

理解完前面的后, 这里开始正题, 仅需一个案例, 就能全盘理解key的作用, 下面开始

先看这个简单的案例(没加key)

    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>

      data() {
        return {
          letters: ['a', 'b', 'c', 'd']
        }
      },
      methods: {
        insertF() {
          this.letters.splice(2, 0, 'f');
        }
      },

可以看出, 该题的目的是想在ab与cd之间, 插入一个f

理解了这个简单的案例后, 我们开始想, 有什么方法来插入到真实DOM中呢 ?

有以下三种 :

方法一(普通方法)

说明 : 直接把以前的dom删掉, 用新的vnode重新渲染一遍

方法二(不带key的diff算法)

说明 : 这是不带key时, vue默认的diff算法, 对应的源码如图

vue会通过判断语句, 来判断你是否带了key

下面是无key时的情况

然后查看patchUnkeyedChildren(), 就能查看diff算法的执行过程

这里简单描述下 :

• 取到旧vnode和新vnode

• 判断两者哪个数组长度较小(用较小的数组patch较大的数组, 才不会引起数组越界)

• 开始patch, 也就是图片提到的, 一直patch到没有空间时(新vnode的c处), 分两种情况

• 旧vnode < 新vnode时(也就是图片这种情况), 则需把多的值(此处为d)挂载至新node

• 旧vnode > 新vnode时, 则卸载旧vnode节点

• 结束循环

方法三(带key的diff算法)

同理, 跟着方法二的步骤就能查看到patchKeyedChildren()方法

这一种方法才是精髓, 开始复杂了

• 先从头patch, 发现不相同时(此处为c !== f), break

• 从尾部patch, 发现不相同时(此处为c !== f), break

  到目前为止, a, b, c, d 已经被渲染至真实DOM中, 就差f了, 下面就开始找f

• 判断 :

• 若旧vnode < 新vnode, 则挂载至新vnode

• 若新vnode > 旧vnode, 则卸载旧vnode多余的节点

• 若新vnode = 旧vnode, 这个就很复杂了, 就不管顺序, 在里面尽量patch到相同的项, 然后在进行卸载和挂载操作

看完了这篇文章，相信你对“vue中的key有什么用”有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！