vue列表渲染中key的作用与原理[理解vue底层原理]

key的原理

  • 遍历列表时key的作用(index作为key)

    1. 初始化数据vue会在内存中根据数据生成虚拟DOM(Vnodes),再讲初始虚拟DOM转为真实DOM

    2. 新数据vue会根据新数据生成新虚拟DOM,利用虚拟DOM对比算法diff

      新虚拟DOMkey=004与初始虚拟DOMkey="001"做对比,发现老刘-30张三-18不一致,<input type="text">一致,生成新的老刘-30 真实DOM,复用旧真实DOM<input type="text"> 出现数据错乱

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通[学习笔记]

  • 遍历列表时key的作用(id作为key)

    1. 初始化数据vue会在内存中根据数据生成虚拟DOM(Vnodes),再将初始虚拟DOM转为真实DOM

    2. 新数据vue会根据新数据生成新虚拟DOM,利用虚拟DOM对比算法diff

      新的虚拟DOMkey=004与初始化DOM对比,没有找到初始化DOMkey=004,生成真实DOM,若找到则复用初始化真实DOM

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通[学习笔记]

面试题:react、vue中的key有什么作用?(key的内部原理)

  1. 虚拟DOM中key的作用:

    key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新的虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如何:

  2. 对比规则:
    (1). 旧虚拟DOM中找到了与新虚拟DOM相同的key:

     1) 若虚拟DOM中内容没变,直接使用了之前的真实DOM
     2) 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面之前的真实DOM

    (2). 旧虚拟DOM中未找到与新虚拟DOM相同的key

      创建新的真实DOM,随后渲染到页面
  3. 用index作为key可能会引发问题:
    (1)若对数据进行,逆序添加、逆序删除破坏顺序操作:

     会产生没有必要的真实DOM更新 ==> 界面效果没问题,但效率低

    (2) 如果结构中还包含输入类的DOM:

      会产生错误DOM更新 ==> 界面有问题
  4. 开发中如何选择key?
    (1)最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
    (2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

来源
key的作用与原理

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!