v-for指令循环中key属性有什么作用?

《v-for指令循环中key属性有什么作用?》

面试哥的最佳答案:四个字来概况     “性能优化”

简述: 让vue在更新数据的时候可以更有针对性的

 

key的作用主要是为了高效的更新虚拟DOM,使用key来给每一个节点做一个唯一标识
diff算法可以正确的识别此节点,找到正确的位置对此节点进行操作

 

KEY值:

可以理解为遍历数组或元素中的唯一标识,在增加或删减元素时,我们可以通过这个唯一的标识key来判断是否是之前的元素,并且该元素key的值是多少。【这个唯一标识是保持不变的】

 
1.当数据发生变化时,vue是怎样更新节点的?

渲染真实DOM的占用是很大的,比如有时我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排

有没有可能我们只更新我们修改的那一小块dom而不是更新整个dom呢?回答:diff算法能够帮助我们。

我们先根据真实DOM生成一颗virtual DOM

  1. 当virtual DOM某个节点的数据改变后生成一个新的vnode
  2. 然后Vnode和oldVnode作对比,发现有不一样的地方就直接修改在真实的DOM上
  3. 然后使oldVnode的值为Vnode。

2.virtual DOM和真实的DOM的区别

virtual DOM是将真实的DOM的数据抽取出来,以对象的形式模拟树形结构。

比如dom是这样的:

 

<div>
     <span>水香木鱼</span>
</div>

对应的virtual DOM(伪代码)

 

var Vnode={
    tag:'div',
    children:[
        {tag:'span', text:'水香木鱼'}
    ]
}

3.diff的比较方式

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

<div>
    <span>水香木鱼</span>
</div>
<div>
    <p>风度</p>
</div>

大家要知道,不仅只是在vue中,react中在执行列表渲染时也会要求给每个组件添加key这个属性。

如果想知道key的作用,我们就得聊一下虚拟DOM的Diff算法

vue的深度剖析:如何去实现一个 Virtual DOM 算法

所谓虚拟DOM的诞生,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法,它的核心是基于两个简单的假设:
1.两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构
2.同一个层级的一组节点,他们可以通过惟一的id进行区分
下面这张是Diff示意图:

《v-for指令循环中key属性有什么作用?》

 

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

《v-for指令循环中key属性有什么作用?》

 

 

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

《v-for指令循环中key属性有什么作用?》

 

 

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

《v-for指令循环中key属性有什么作用?》

 

总结

  • 所以我们需要使用key来给每个节点做一个唯一的标识,Diff算法就可以正确地识别此节点,找到正确的位置区域插入新的节点
  • key的作用主要是为了高效地更新虚拟DOM,另外vue在使用相同标签名元素的过渡切换时,也会使用到key属性。其目的也是为了让vue可以区分他们,否则vue只会替换其内部属性而不会触发过渡效果。

深度剖析:如何实现一个Virtual DOM算法
所谓的Virtual DOM算法,包括几个步骤:
1.用JavaScript对象结构表示DOM树的结构;然后用这个树构建一个真正的DOM树,插到文档中
2.当状态变更的时候,重新构造一颗新的对象树。然后新的树和旧的树进行比较。记录两棵树差异
3.把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了

《v-for指令循环中key属性有什么作用?》

 

 

    原文作者:水香木鱼
    原文地址: https://blog.csdn.net/weixin_48337566/article/details/115933743
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞