Vue面试题13:说一说key的作用

  • 思路分析:

    • 1.给出结论,key的作用是用于优化patch性能;
    • 2.key的必要性;
    • 3.实际使用方式;
    • 4.总结:可从源码层面描述一下vue如何判断两个节点是否相同;
  • 回答范例:

    • 1.key的作用主要是为了更高效的更新虚拟DOM;
    • 2.vue在patch过程中判断两个节点是否是相同节点是key是一个必要条件,渲染一组列表时,key往往是唯一标识,所以如果不定义key的话,vue只能认为比较的两个节点是同一个,哪怕它们实际上不是,这导致了频繁更新元素,使得整个patch过程比较低效,影响性能;
    • 3.实际使用中在渲染一组列表时key必须设置,而且必须是唯一标识,应该避免使用数组索引作为key,这可能导致一些隐蔽的bug(过程中对数组进行排序等);vue中在使用相同标签元素过渡切换时,也会使用key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果;
    • 4.从源码中可以知道,vue判断两个节点是否相同时主要判断两者的key和元素类型等(isSameVNodeType),因此如果不设置key,它的值就是undefined,则可能永远认为这是两个相同节点,只能去做更新操作,这造成了大量的dom更新操作,明显是不可取的;

案例:模拟以下操作

不使用key:增加3次额外的更新操作和1次E节点的创建和追加操作

使用key:

posted @ 2022-09-07 10:29  Mochenghualei  阅读(455)  评论(0)    收藏  举报