当前位置: 首页 > Web前端 > vue.js

为什么在使用React-Vue项目时需要在列表组件中写Key,它的作用是什么?

时间:2023-03-31 16:08:05 vue.js

key是每个vnode的唯一id,可以依靠key更准确、更快速的获取oldVnode中对应的vnode节点。因为不是用key进行原地复用,所以比较准确,在sameNode函数a.key===b.key的比较中可以避免原地复用。所以它会更准确。更快的是利用key的唯一性生成一个map对象来获取对应的节点,比遍历的方式更快。vue和react都使用diff算法比较新旧虚拟节点来更新节点。在交叉比较中,当新节点和旧节点头尾交叉比较没有结果时,会根据新节点的key来比较旧节点数组中的key,所以至于找到对应的旧节点(这里对应一个key=>indexmapmapping)。如果没有找到,则认为是一个新节点。而如果没有key,则遍历查找对应的老节点。一种是地图映射,一种是遍历搜索。相比下。地图映射更快。它没有密钥并使用简单的模板。基于这个前提,可以更有效地复用节点。在diff速度上,没有key也更快,因为有key的节点增删改费时间。这就是vue文档所说的默认模式。但这不是key的作用,而是节点可以在没有key的情况下原地复用,提高性能。这种模式会带来一些隐藏的副作用,比如可能不会产生过渡效果,或者某些节点绑定了数据(表单)状态,会出现状态错位。VUE文档也说明了这一点。另外,key的作用是在执行diff算法时更快的找到对应的节点,提高diff的速度,但是这个是有争议的。组织角色从穆一扬键