一key的笔记是什么key的作用就是给for生成的元素唯一的一个标识。不写这个key很多场景也不报错。key是一个特殊属性给vue使用的渲染出来的html就不带这个属性了。二代码示例使用index作为keyli元素后边如果有input且都有值那么在第一个元素上再添加一套元素的时候input元素的值就错乱了。这是index作为key的一种弊端。最好就是写iD另外这么写有很深的性能问题。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlekey的作用和原理/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器, -- div idroot h2人员列表/h2 button click.onceadd添加一个老刘/button ul li v-forp in persons :keyp.id{{p.name}}-{{p.age}}/li /ul /div script Vue.config.productionTip false 5 const vm new Vue({ el: #root, data: { persons: [ { id: 001, name: 张三, age: 13 }, { id: 002, name: 李四, age: 18 }, { id: 003, name: 王五, age: 20 } ] }, methods: { add() { const p { id: 004, name: 老刘, age: 65 } this.persons.unshift(p); } } }) /script /body /html如果对数据做了破坏顺序的操作就会有问题。为什么效率低因为破坏顺序之后同一行比对顺序错了。就不一样了。会重新生成。为什么使用iD作为就没有问题呢能复用不发生错乱vue搞这个对比算法就是为了复用节点提升效率三总结虚拟 DOM 中 key 的作用key 是虚拟 DOM 对象的标识当数据发生变化时Vue 会根据【新数据】生成【新的虚拟 DOM】随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较比较规则如下对比规则(1). 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key ①. 若虚拟 DOM 中内容没变直接使用之前的真实 DOM②. 若虚拟 DOM 中内容变了则生成新的真实 DOM随后替换掉页面中之前的真实 DOM。(2). 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key 创建新的真实 DOM随后渲染到到页面。用 index 作为 key 可能会引发的问题若对数据进行逆序添加、逆序删除等破坏顺序操作 会产生没有必要的真实 DOM 更新 界面效果没问题但效率低。如果结构中还包含输入类的 DOM 会产生错误 DOM 更新 界面有问题。开发中如何选择 key?:1. 最好使用每条数据的唯一标识作为 key比如 id、手机号、身份证号、学号等唯一值。 2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作仅用于渲染列表用于展示使用 index 作为 key 是没有问题的。
尧图网络