React 、vue 中Key 的作用

·  阅读 469
React 、vue 中Key 的作用

虚拟DOM中key 的作用:

Key是虚拟DOM对象的标识,当数据发生变化时,vue会根据【新数据】生成【新的虚拟DOM】,随后vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较(diff算法)

  • 旧虚拟DOM中找到了与新虚拟DOM相同的Key:

    1.若虚拟DOM中内容没变,直接使用之前的真实DOM

    2.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

  • 旧虚拟DOM中未找到与新虚拟DOM相同的Key:

    1.创建新的真实DOM,随后渲染到页面

用index 作为 key可能引发的问题:
  • 若对数据进行:逆序添加(删除)等破坏顺序操作:会产生没有必要的真实DOM更新=》界面效果没问题,单效率低

  • 如果结构中还包含输入类的DOM:会产生错误的DOM更新 =》 界面有问题

开发中存在对数据的逆序添加、逆序删除等破坏顺序的操作,应选择每条数据的唯一标识作为Key。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes

分类:
前端
标签: