Vue 响应式原理?

轩辕小不懂发布于 2021-12-25 13:46

阅读 442

答案 1

分类：WEB前端开发

Nen 2021-12-25 14:04

- 程序员

key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速 (对于简单列表页渲染来说 diff 节点也更快,但会产生一些隐藏的副作

用,比如可能不会产生过渡效果,或者在某些节点有绑定数据（表单）状态，会出现状态错位。)

diff 算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的 key 与旧节点进行比对,从而找到相应旧节点.

更准确 : 因为带 key 就不是就地复用了,在 sameNode 函数 a.key '===' b.key 对比中可以避免就地复用的情况。所以会更加准确,如果不加 key,会导致

之前节点的状态被保留下来,会产生一系列的 bug。更快速 : key 的唯一性可以被 Map 数据结构充分利用,相比于遍历查找的时间复杂度 O(n),Map 的

时间复杂度仅仅为 O(1),源码如下:

function createKeyToOldIdx(children, beginIdx, endIdx) {

let i, key;

const map = {};

for (i = beginIdx; i <= endIdx; ++i) {

key = children[i].key;

if (isDef(key)) map[key] = i;

}

return map;

}