vue遍历key的作用,vue中key作用

　　本文主要介绍了按键在Vue列表渲染中的原理和作用。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

目录

　　列表渲染的原理和功能key的原理分析和功能总结

列表渲染 key 的原理和作用

　　关键是识别节点。如果将index的值绑定到键上，很容易出现问题：

　　1.如果对数据进行逆序添加、逆序删除等破坏性操作，会产生不必要的真实DOM来更新——页面。效果上没有问题，但是效率上有两个问题。

　　2.如果输入类的DOM包含在解构中，就会产生错误。DOM更新3354接口有问题。

　　问题案例分析：

　　点击按钮，在列表的前面添加一个对象

　　div id=root

　　Button @click.once=add 添加一个老刘/button

　　保险商实验所

　　李v-for=(p，index) in persons :key=index

　　{{p.name}} - {{p.age}}

　　输入类型=文本

　　/李

　　/ul

　　/div

　　var vm=new Vue({

　　el:#root ，

　　数据：{

　　人员：[

　　{id:001 ，姓名：张三，年龄：15}，

　　{id:002 ，姓名：李四，年龄：16}，

　　{id:003 ，姓名：王武，年龄：17}

　　]

　　},

　　方法：{

　　add(){

　　Const p={id:004 ，姓名：老刘，年龄：20}

　　this.persons.unshift(p)

　　}

　　},

　　})

　　展现出来是这样的一个效果

　　当我们将姓名填入输入框中

　　然后点击按钮，观察出现的问题

　　我们会发现老刘出现在表单的顶部，但是列表中的内容并不等于输入框中的内容。

　　解决方案：我们将：key=index 改为：key=id

key的原理分析

　　初始数据

　　获取初始数据，根据初始数据生成一个虚拟DOM，将虚拟DOM变成真实DOM。

　　新数据

　　获取新的数据(包括老刘)，根据数据生成虚拟DOM。将虚拟DOM与初始数据的虚拟DOM进行比较。(李里面的文字信息不一样，但是输入是一样的，虚拟DOM没有数据，页面上输入的内容存储在真实DOM里。)文本信息3354新数据替换初始数据，输入内容保留。

key的作用

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。