key 是虚拟DOM的标识,当数据发生变化时,vue会根据新数据生成新的虛拟DOM,随后进行新旧对比
DOM的差异比较,比较规则如下:
1.旧虚拟DOM中找到了与新虚拟DOM相同的key:
虛拟DOM中内容没变,直接使用之前的真实DOM
虚拟DOM中内容变化了,则生成新的真实DOM,替换掉页面中之前的真实DOM
2.旧虚拟DOM中末找到新虛拟DOM相同的key:
创建新的真实DOM,随后渲染到页面。
用index作为key可能会引发的问题
若对数据进行逆序添加、逆序删除等破坏顺序的操作时:
- 会产生没有必要的真实DOM更新,即便界面效果没问题,但效率低
- 如果结构中还包含输入类的DOM,会产生错误DOM更新,页面有问题
开发中如何选择key:
- 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号等唯一值
- 如果不存在破坏顺序的操作,仅用于渲染列表用于展示时,使用index作为key也是没有问题的