浅谈Vue3中key的作用和工作原理
更新时间：2021年08月08日 08:35:25 作者：易小川打码
本文主要介绍了Vue3中key的作用和工作原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这个key属性有什么作用呢？我们先来看一下官方的解释：
- kekey属性主要用在Vue的虚拟DOM diff算法中，在新旧nodes对比时辨识Vnodes；
- 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
- 而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素。
先简单提一下我对VNode的理解：
- VNode的全称是Virtual Node，也就是虚拟节点；
- Vnode的本质是一个JavaScript的对象；
- 实际上在Vue中，无论是组件还是单个元素，都表示成了一个个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效率是最高的呢？
思路：
- 重新渲染一次（消耗大量性能）
- 前面的VNode不变，从插入位置重新渲染（消耗较大性能）
- 所有的VNnode都重新渲染，只需插入新增VNode（性能最好）
结论：想要最高性能，那么必须给新旧VNodes进行key标识，通过key值把旧的VNodes与新的VNodes进行对比，想办法找出需要增加的或者删除的是哪个VNode，其他的VNode尽量不变，那么新旧VNodes对比的这个过程就是diff算法。
Vue事实上会对于有key和没有key会调用两个不同的方法，下面我们来看看源码：（packages\runtime-core\src\renderer）
在有key的情况，执行 patchKeyedChildren方法：
没有key值，执行 patchUnkeyedChildren方法：
注意：当没有key值时，列表过多，也会依次进行patch，会消耗大量性能，那么加上key值后就会节省很多性能损耗。
结论：
所以 key值 是在DOM树进行diff算法时候发挥作用，一个是用来判断新旧 Vnode 是否为同一个，从而进行下一步的比较以及渲染，另外一个作用就是判断组件是否可以复用，是否需要重新渲染。
到此这篇关于Vue3中key的作用和工作原理的文章就介绍到这了,更多相关Vue3中key的作用和工作原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本文主要介绍了el-table和jsplumb实现连线功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue百度地图实现定位和marker拖拽监听功能,实现思路非常简单，本文结合实例代码效果图给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
vue3中echarts的tooltip组件不显示问题及解决
这篇文章主要介绍了vue3中echarts的tooltip组件不显示问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本篇文章主要介绍了vue2.0使用Sortable.js实现的拖拽功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
这篇文章主要给大家介绍了关于Vue中$refs的探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
说起canvas是css3新增的标签,而饼状图又是canvas经典,我们公司现在正在用uni-app框架去研发APP,下面这篇文章主要给大家介绍了关于Vue和uniapp中该如何使用canvas的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue 左滑删除功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要介绍了使用vuex解决刷新页面state数据消失的问题记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论