Vue20-列表渲染key的作用和原理

key简单的说就是一行的唯一标识

1.先看实例演示:点击按钮在数据最前面新增的一个元素对象,key使用索引或者不写key,不写默认为index

Vue20-列表渲染key的作用和原理_第1张图片

Vue20-列表渲染key的作用和原理_第2张图片

 点击添加按钮没问题

Vue20-列表渲染key的作用和原理_第3张图片

我又想在每个对象后面添加一个输入框,并输入其信息

Vue20-列表渲染key的作用和原理_第4张图片

 Vue20-列表渲染key的作用和原理_第5张图片

点击添加按钮之后

Vue20-列表渲染key的作用和原理_第6张图片

结果数据串了,如果是在最后添加对象其实不会出现这个问题。

最后改成:key="p.id"后,添加则不会有问题

Vue20-列表渲染key的作用和原理_第7张图片

 2.key的工作原理和虚拟DOM对比工作原理图:

index作为key:

Vue20-列表渲染key的作用和原理_第8张图片

id作为key:原理是一样的,因为key不会发生变化,所以不会出现数据窜的现象

 Vue20-列表渲染key的作用和原理_第9张图片

 总结:

Vue20-列表渲染key的作用和原理_第10张图片

你可能感兴趣的:(Vue教程系列,vue.js,vue)