你知道vue中key的原理吗？说说你对它的理解
发布于 2021-01-11 17:11:43
关注者
0
被浏览
457
6 个回答
-
便于Diff时更高效的进行节点查询对比。
有key时，通过createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)生成的key与索引映射关系，直接通过新子节点的key查询是否存在于旧子节点序列中。
无key时，必须遍历旧子节点序列，依次与新子节点对比判断是否为新增节点。
参考vue/src/core/vdom/patch.jsupdateChildren方法 -
key的作用主要是为了高效的更新虚拟DOM;
如果没有唯一的key, 数据更新时, 相同节点更新前后无法准确一一对应起来,会导致更新效率降低;
当页面的数据发生变化时，Diff算法只会比较同一层级的节点：- 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点;
- 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新;
-
@Aaron0525 请问 隐蔽性的更新问题 是什么意思？我的理解就是如果不使用唯一key在有状态组件中会出现渲染错误，如果使用index也可能会出现渲染错位的情况，因为diff是同级比对
-
