这篇文章主要介绍“Vue3中key的作用和工作原理是什么”，在日常操作中，相信很多人在Vue3中key的作用和工作原理是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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" >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的作用和工作原理是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
