vue中的key有什么用

小编给大家分享一下vue中的key有什么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的承德县网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

key到底有什么用途 ?

先来看官方解释 :

key属性主要用在vue的虚拟DOM算法(diff算法), 在新旧nodes对比时辨识VNodes
不使用key时, Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
使用key时, 它会基于key的变化重新排列元素顺序, 并且会移除/销毁key不存在的元素

面对这些云里雾里的概念, 先不要急, 看一遍有个印象, 接下来一步步来深度解析key到底拿来干嘛。

1 vnode 虚拟节点

vnode : virtual node, 虚拟节点

还记得DOM树中的要素吗 ? 文档, 元素, 节点

那什么是虚拟节点呢 ?

简单来说, 要被vue渲染到页面上的节点, 就是虚拟节点

  
    哈哈哈

这里的div就是一个虚拟节点, 在vue中, 它以这种形式存在

    const vnode = {
      type: "div",
      props: {
        class: "title",
        style: {
          "font-size": "30px",
          color: "red",
        },
      },
      children: "哈哈哈",
    };

不理解的地方可能是children这个属性, 因为现在div没有子元素, 因此值仅仅为"哈哈哈", 若有子元素, 那么就会是一直套娃套下去, 套到最后一个结点为止, 如

      children: [
        {
          // 子元素
        },
        {
          // 子元素
        }
      ],

2 vDOM 虚拟DOM

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

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

转换成虚拟DOM树 :

vue中的key有什么用

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

3 渲染过程

vue中的key有什么用

4 案例 : 插入f

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

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

    
      {{item}}

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

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

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

有以下三种 :

方法一(普通方法)

vue中的key有什么用