v-for中key的作用

大纲.jpg

v-for中key的作用
1.当数据发生变化时，vue是怎样更新节点的?
渲染真实DOM的开销是很大的，比如有时我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不是更新整个dom呢？diff算法能够帮助我们。
我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后生成一个新的vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
2.virtual DOM和真实的DOM的区别
virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。比如dom是这样的：

<div>
     <p>123</p>
</div>

对应的virtual DOM（伪代码）

var Vnode={
    tag:'div',
    children:[
        {tag:'p', text:'123'}
    ]
}

3.diff的比较方式
在采取diff算法比较新旧节点的时候，比较只会在同层进行，不会跨层级比较。

<div>
    <p>123</p>
</div>
<div>
    <span>456</span>
</div>

大家要知道，不仅只是在vue中，react中在执行列表渲染时也会要求给每个组件添加key这个属性。如果想知道key的作用，我们就得聊一下虚拟DOM的Diff算法
参考文章：深度剖析:如何实现一个 Virtual DOM算法
所谓虚拟DOM的诞生，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法，它的核心是基于两个简单的假设：
1.两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构
2.同一个层级的一组节点，他们可以通过惟一的id进行区分
下面这张是Diff示意图：

2.jpg

由此图我们可以看出：
当页面的数据发生变化时，Diff算法只会比较同一层级的节点
如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。
如果节点类型相同：则会重新设置该节点的属性，从而实现节点的更新。
当某一层有很多相同的界定时，也就是列表节点，Diff算法的更新过程默认情况下也是遵循以上原则。比如下面这个情况：

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

[图片上传中...(3.jpg-9257d2-1556197126415-0)]

既把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没效率？

所以我们需要使用key来给每个节点做一个唯一的标识，Diff算法就可以正确地识别此节点，找到正确的位置区域插入新的节点
所以一句话，key的作用主要是为了高效地更新虚拟DOM，另外vue在使用相同标签名元素的过渡切换时，也会使用到key属性。其目的也是为了让vue可以区分他们，否则vue只会替换其内部属性而不会触发过渡效果。
深度剖析：如何实现一个Virtual DOM算法
所谓的Virtual DOM算法，包括几个步骤：
1.用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档中
2.当状态变更的时候，重新构造一颗新的对象树。然后新的树和旧的树进行比较。记录两棵树差异
3.把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了