react、vue中key的作用(key的原理？)：
- 虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当张贴中的数据发生变化时，vue会根据--新数据，生成 新的虚拟DOM，随后vue进行 新虚拟DOM与 旧虚拟DOM的差异比较。
- 比较规则如下：
- 对比规则
- 旧虚拟DOM中找到了与新虚拟DOM相同的key
- 若虚拟DOM中内容没变，直接使用之前的真实DOM
- 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
- 旧虚拟DOM中没有找到与新虚拟DOM相同的key
- 创建新的真实DOM，随后渲染到页面
- 旧虚拟DOM中找到了与新虚拟DOM相同的key
- 用index作为key可能引发的问题
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作——会产生没有必要的真实DOM更新(界面效果没问题，但效率低)
- 如果结构中还包含输入类的DOM：会产生错误DOM更新(界面会有问题)
- 开发中如何选择key
- 最好使用每条数据的唯一标识作为key，比如：id或其他主键列
- 如果不存在对数据的逆序添加、逆序删除等破坏操作，仅用于渲染列表用于展示，则使用index作为key是没有问题的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>key的原理</title> <script type="text/javascript" src="../Js/vue.js"></script></head><body> <div id="root"> <h2>人员列表信息(遍历数组)：</h2> <hr> <h2 style="color: burlywood;"> 1.:key="p.id"，表示动态属性，动态绑定唯一标识(注：建议应始终存在该属性的设置)<br /> 2.写法<br /> v-for="p in personList" :key="p.id" ==> v-for="(p,index) in personList" :key="index"<br /> v-for指令<br /> 1.用于展示列表数据<br /> 2.语法：v-for="(item,index) in objXXX" :key="xxx"<br /> 3.可遍历：数组、对象、字符串(使用较少)、指定次数(使用较少)<br /> 4.强烈建议使用语法：v-for="p in personList" :key="p.id"<br /> </h2> <hr> <button @click.once="add">新增人员</button> <!-- 遍历数组 --> <ul> <!-- <li v-for="p in personList" :key="p.id"> {{p.id}}-{{p.name}}-{{p.age}} </li> <hr> --> <li v-for="(p,index) in personList" :key="index"> {{p.id}}-{{p.name}}-{{p.age}}-{{index}} </li> </ul> <hr> </div></body></html><script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { personList: [ { id: '001', name: '乔峰', age: 28 }, { id: '002', name: '虚竹', age: 25 }, { id: '003', name: '段誉', age: 22 }, ], }, methods: { add () { const p = { id: '004', name: '扫地僧', age: 65 } // this.personList.unshift(p)//新增带第一个 索引0的位置 this.personList.push(p)//新增 } } })</script> |
pop（）从数组最后一个元素开始删除
shift（）从数组第一个元素开始删除
splice（）从数组指定的元素开始删除
博客内容主要用于日常学习记录，内容比较随意，如有问题，还需谅解！！！
分类:
Vue
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
2017-02-28 ng表单验证
2017-02-28 ng-model的用法