脚本宝典收集整理的这篇文章主要介绍了浅谈Vue3中key的作用和工作原理,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
这个key属性有什么作用呢?我们先来看一下官方的解释:
先简单提一下我对VNode的理解:
举个例子:
<div class="tITle" style="color: red;">Helllo World</div> // 实际上在Vue中会表示为: const VNode = { tyPE: "div", PRops: { class: "title", style: { color: "red" } }, children: "Hello World" // 假如div里面还包含着其他标签,那么会以同样的方式转成在children里面 }
在什么情况下,插入f效率是最高的呢?
思路:
结论:想要最高性能,那么必须给新旧VNodes进行key标识,通过key值把旧的VNodes与新的VNodes进行对比,想办法找出需要增加的或者删除的是哪个VNode,其他的VNode尽量不变,那么新旧VNodes对比的这个过程就是diff算法。
Vue事实上会对于有key和没有key会调用两个不同的方法,下面我们来看看源码:(packages\runtime-core\src\renderer)
在有key的情况,执行 patchKeyedChildren方法:
@H_126_66@
没有key值,执行 patchUnkeyedChildren方法:
注意:当没有key值时,列表过多,也会依次进行patch,会消耗大量性能,那么加上key值后就会节省很多性能损耗。
结论:
所以 key值 是在DOM树进行diff算法时候发挥作用,一个是用来判断新旧 Vnode 是否为同一个,从而进行下一步的比较以及渲染,另外一个作用就是判断组件是否可以复用,是否需要重新渲染。
到此这篇关于Vue3中key的作用和工作原理的文章就介绍到这了,更多相关Vue3中key的作用和工作原理内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的浅谈Vue3中key的作用和工作原理全部内容,希望文章能够帮你解决浅谈Vue3中key的作用和工作原理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。