vue中key值的作用

key值：用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
key的作用主要是为了高效的更新虚拟DOM

1.diff算法 & 虚拟dom
当我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，因此采用diff算法来解决上述问题，通过改变局部dom来更新视图。（渲染真实的dom的开销比较大）
（1）我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比(Vnode是个对象)，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

(2) 虚拟dom

// 真实dom
div>
    
123

// 虚拟dom var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ] };

（3）diff的比较方式

采用同层级对比，不会跨层级对比

  dasd



   
段落

diff算法只会同一层的div进行比较，不会去用div和p去对比。

网上有比较形象的示意图如下所示

image.png

（4）diff 算法

image.png