区块链技术博客
www.b2bchain.cn

写v-for时,为什么控制台总喊我加个key!求职学习资料

本文介绍了写v-for时,为什么控制台总喊我加个key!求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

VirtualDOM的主要思想就是模拟DOM的树状结构,在内存中创建保存映射DOM信息的节点数据。视图需要更新时,先对节点数据进行diff后得到差异结果后,再一次性对DOM进行批量更新操作。

将一棵树转换成另一棵树的最小操作数,即使在最前沿的算法中,该算法的复杂程度为O(n³),其中n是树中元素的数量。展示 1000 个元素所需要执行的计算量将在十亿的量级范围。在VirtualDOM方法被提出后,社区中不断涌现对diff的改进算法,最终从O(n³)提升至O(n)。

1. Diff算法

1.1 按tree层级diff

UI中很少出现DOM的层级结构因为交互而产生更新。因此VirtualDOM的diff策略是在新旧节点树之间按层级进行diff得到差异,而非传统的按深度遍历搜索。
写v-for时,为什么控制台总喊我加个key!

1.2 按类型diff

VirtualDOM中的节点数据对应的是一个原生DOM节点,或者vue/react中的一个组件。不同类型的节点往往相差很大,当节点类型发生改变时,则不进行子树的比较,直接创建新类型的VirtualDOM,替换旧节点。
写v-for时,为什么控制台总喊我加个key!

// snabbdom.js function sameVnode(vnode1, vnode2) {     return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; }  function patch(oldVnode, vnode) {     // ...     // 相同类型的Vnode,比较后更新     if (sameVnode(oldVnode, vnode)) {         patchVnode(oldVnode, vnode)     } else {     // 不同类型的Vnode,创建新的节点,替换旧的节点         elm = oldVnode.elm         parent = api.parentNode(elm)         createElm(vnode)         if (parent !== null) {             api.insertBefore(parent, vnode.elm, api.nextSibling(elm))             removeVnodes(parent, [oldVnode])         }     }      // ... }

1.3 列表diff

当被diff的节点处于同一层级时,可以执行 插入、移动和删除三种操作。同时提供用户设置key属性的方式调整排序。
写v-for时,为什么控制台总喊我加个key!

2. Key

v-for为什么要加Key?
当递归DOM节点的子元素时,Vue会同时遍历两个子元素的列表,当产生差异时,生成一个DOM操作。
在列表末尾新增元素时,变更开销比较小。Vue遍历列表,发现前两个元素没变,然后插入第三个元素。
在列表头部插入时,Vue依次遍历下来,会针对每个子元素都生成了DOM操作。

明明移动节点就可以解决问题,却变成了DOM节点不断地删除和重建!

<ul>     <li>first</li>     <li>second</li> </ul>  <ul>     <li>zero</li>     <li>first</li>     <li>second</li> </ul>

这种情况多数出现在v-for
出现v-for时, Vue会认为又有更新列表的操作了!
这个列表DOM更新的性能问题又要出现了!
这时,控制台会提醒我们: 加个key啊!!!!!

<ul>     <li key="1">first</li>     <li key="2">second</li> </ul>  <ul>     <li key="0">zero</li>     <li key="1">first</li>     <li key="2">second</li> </ul>

key这个属性不是给用户用的,而是给Vue自己用的。Vue需要判断,对数组中的每一项,到底是新建一个元素加入到页面中,还是更新原来的元素。从而避免组件被不必要地重建。

VirtualDOM的主要思想就是模拟DOM的树状结构,在内存中创建保存映射DOM信息的节点数据。视图需要更新时,先对节点数据进行diff后得到差异结果后,再一次性对DOM进行批量更新操作。

将一棵树转换成另一棵树的最小操作数,即使在最前沿的算法中,该算法的复杂程度为O(n³),其中n是树中元素的数量。展示 1000 个元素所需要执行的计算量将在十亿的量级范围。在VirtualDOM方法被提出后,社区中不断涌现对diff的改进算法,最终从O(n³)提升至O(n)。

1. Diff算法

1.1 按tree层级diff

UI中很少出现DOM的层级结构因为交互而产生更新。因此VirtualDOM的diff策略是在新旧节点树之间按层级进行diff得到差异,而非传统的按深度遍历搜索。
写v-for时,为什么控制台总喊我加个key!

1.2 按类型diff

VirtualDOM中的节点数据对应的是一个原生DOM节点,或者vue/react中的一个组件。不同类型的节点往往相差很大,当节点类型发生改变时,则不进行子树的比较,直接创建新类型的VirtualDOM,替换旧节点。
写v-for时,为什么控制台总喊我加个key!

// snabbdom.js function sameVnode(vnode1, vnode2) {     return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; }  function patch(oldVnode, vnode) {     // ...     // 相同类型的Vnode,比较后更新     if (sameVnode(oldVnode, vnode)) {         patchVnode(oldVnode, vnode)     } else {     // 不同类型的Vnode,创建新的节点,替换旧的节点         elm = oldVnode.elm         parent = api.parentNode(elm)         createElm(vnode)         if (parent !== null) {             api.insertBefore(parent, vnode.elm, api.nextSibling(elm))             removeVnodes(parent, [oldVnode])         }     }      // ... }

1.3 列表diff

当被diff的节点处于同一层级时,可以执行 插入、移动和删除三种操作。同时提供用户设置key属性的方式调整排序。
写v-for时,为什么控制台总喊我加个key!

2. Key

v-for为什么要加Key?
当递归DOM节点的子元素时,Vue会同时遍历两个子元素的列表,当产生差异时,生成一个DOM操作。
在列表末尾新增元素时,变更开销比较小。Vue遍历列表,发现前两个元素没变,然后插入第三个元素。
在列表头部插入时,Vue依次遍历下来,会针对每个子元素都生成了DOM操作。

明明移动节点就可以解决问题,却变成了DOM节点不断地删除和重建!

<ul>     <li>first</li>     <li>second</li> </ul>  <ul>     <li>zero</li>     <li>first</li>     <li>second</li> </ul>

这种情况多数出现在v-for
出现v-for时, Vue会认为又有更新列表的操作了!
这个列表DOM更新的性能问题又要出现了!
这时,控制台会提醒我们: 加个key啊!!!!!

<ul>     <li key="1">first</li>     <li key="2">second</li> </ul>  <ul>     <li key="0">zero</li>     <li key="1">first</li>     <li key="2">second</li> </ul>

key这个属性不是给用户用的,而是给Vue自己用的。Vue需要判断,对数组中的每一项,到底是新建一个元素加入到页面中,还是更新原来的元素。从而避免组件被不必要地重建。

VirtualDOM的主要思想就是模拟DOM的树状结构,在内存中创建保存映射DOM信息的节点数据。视图需要更新时,先对节点数据进行diff后得到差异结果后,再一次性对DOM进行批量更新操作。

将一棵树转换成另一棵树的最小操作数,即使在最前沿的算法中,该算法的复杂程度为O(n³),其中n是树中元素的数量。展示 1000 个元素所需要执行的计算量将在十亿的量级范围。在VirtualDOM方法被提出后,社区中不断涌现对diff的改进算法,最终从O(n³)提升至O(n)。

1. Diff算法

1.1 按tree层级diff

UI中很少出现DOM的层级结构因为交互而产生更新。因此VirtualDOM的diff策略是在新旧节点树之间按层级进行diff得到差异,而非传统的按深度遍历搜索。
写v-for时,为什么控制台总喊我加个key!

1.2 按类型diff

VirtualDOM中的节点数据对应的是一个原生DOM节点,或者vue/react中的一个组件。不同类型的节点往往相差很大,当节点类型发生改变时,则不进行子树的比较,直接创建新类型的VirtualDOM,替换旧节点。
写v-for时,为什么控制台总喊我加个key!

// snabbdom.js function sameVnode(vnode1, vnode2) {     return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; }  function patch(oldVnode, vnode) {     // ...     // 相同类型的Vnode,比较后更新     if (sameVnode(oldVnode, vnode)) {         patchVnode(oldVnode, vnode)     } else {     // 不同类型的Vnode,创建新的节点,替换旧的节点         elm = oldVnode.elm         parent = api.parentNode(elm)         createElm(vnode)         if (parent !== null) {             api.insertBefore(parent, vnode.elm, api.nextSibling(elm))             removeVnodes(parent, [oldVnode])         }     }      // ... }

1.3 列表diff

当被diff的节点处于同一层级时,可以执行 插入、移动和删除三种操作。同时提供用户设置key属性的方式调整排序。
写v-for时,为什么控制台总喊我加个key!

2. Key

v-for为什么要加Key?
当递归DOM节点的子元素时,Vue会同时遍历两个子元素的列表,当产生差异时,生成一个DOM操作。
在列表末尾新增元素时,变更开销比较小。Vue遍历列表,发现前两个元素没变,然后插入第三个元素。
在列表头部插入时,Vue依次遍历下来,会针对每个子元素都生成了DOM操作。

明明移动节点就可以解决问题,却变成了DOM节点不断地删除和重建!

<ul>     <li>first</li>     <li>second</li> </ul>  <ul>     <li>zero</li>     <li>first</li>     <li>second</li> </ul>

这种情况多数出现在v-for
出现v-for时, Vue会认为又有更新列表的操作了!
这个列表DOM更新的性能问题又要出现了!
这时,控制台会提醒我们: 加个key啊!!!!!

<ul>     <li key="1">first</li>     <li key="2">second</li> </ul>  <ul>     <li key="0">zero</li>     <li key="1">first</li>     <li key="2">second</li> </ul>

key这个属性不是给用户用的,而是给Vue自己用的。Vue需要判断,对数组中的每一项,到底是新建一个元素加入到页面中,还是更新原来的元素。从而避免组件被不必要地重建。

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 写v-for时,为什么控制台总喊我加个key!求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们