vue

你知道vue中key的原理吗?说说你对它的理解

发布于 2021-01-11 17:11:43
关注者
0
被浏览
457
6 个回答
  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    便于Diff时更高效的进行节点查询对比。
    有key时,通过createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)生成的key与索引映射关系,直接通过新子节点的key查询是否存在于旧子节点序列中。
    无key时,必须遍历旧子节点序列,依次与新子节点对比判断是否为新增节点。
    参考vue/src/core/vdom/patch.jsupdateChildren方法

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    key的作用主要是为了高效的更新虚拟DOM;
    如果没有唯一的key, 数据更新时, 相同节点更新前后无法准确一一对应起来,会导致更新效率降低;
    当页面的数据发生变化时,Diff算法只会比较同一层级的节点:

    1. 如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点;
    2. 如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新;
  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。

    @Aaron0525 请问 隐蔽性的更新问题 是什么意思?我的理解就是如果不使用唯一key在有状态组件中会出现渲染错误,如果使用index也可能会出现渲染错位的情况,因为diff是同级比对

  • 面试哥
    面试哥 2021-01-12
    为面试而生,有面试问题,就找面试哥。
知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看