vue key的原理,vue里面的key的作用

　　主要介绍了Vue3中key的作用和工作原理，通过实例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。

　　这个key属性有什么作用呢？我们先来看一下官方的解释：

　　Kekey属性主要用于Vue的虚拟DOM diff算法中识别Vnodes新旧节点对比时；

　　如果不使用key，Vue会使用一种算法，最大限度地减少动态元素，并尽可能就地修改/重用相同类型的元素。

　　当使用key时，它会根据key的变化重新排列元素的顺序，并删除/销毁key不存在的元素。

　　先简单提一下我对VNode的理解：

　　VNode的全称是Virtual Node，即虚拟节点；

　　Vnode的本质是一个JavaScript对象；

　　实际上，在Vue中，组件和单个元素都表示为VNode。

　　例如：

　　 div class= title style= color:red；hello World/div

　　//实际上会表示为：

　　const VNode={

　　类型： div ，

　　道具：{

　　类别：“标题”，

　　风格：{

　　颜色：红色

　　}

　　},

　　Children: Hello World //如果div包含其他标记，它将以同样的方式转换为Children。

　　}

　　在什么情况下，插入f效率是最高的呢？

　　思路：

　　再次渲染(消耗大量性能)

　　之前的VNode不变，从插入位置重新渲染(消耗大量性能)。

　　的所有VNode都会重新呈现，只需插入新的VNode(具有最佳性能)。

　　结论：如果你想要最高的性能，你必须用一个键来标记新的和旧的VNodes，通过键值来比较旧的VNodes和新的VNodes，并且找出哪个VNodes需要被添加或删除，并且尽量保持其他VNodes不变。那么这个比较新旧VNodes的过程就是diff算法。

　　Vue事实上会对于有key和没有key会调用两个不同的方法，下面我们来看看源码：（packages\runtime-core\src\renderer）

　　在有key的情况，执行 patchKeyedChildren方法：

　　没有key值，执行 patchUnkeyedChildren方法：

　　注意：没有键值的时候，如果列表太多，会依次进行patch，会消耗很多性能，所以添加键值会节省很多性能损失。

　　结论：

　　所以，当DOM树执行diff算法时，键值就起了作用。一是判断新的VNode和旧的Vnode是否相同，以便进行下一步的比较和渲染，二是判断组件是否可以重用，是否需要重新渲染。

　　关于Vue3中按键的功能和工作原理的文章到此为止。更多关于Vue3中key的功能和工作原理，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。