Vue（十二）：列表渲染—— v-for
1.基础使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <!-- v-for指令： 作用：用于展示列表的数据 写法：v-for="a in xxx" :key="yyy" a是内容或值，xxx可以是数组、对象、字符串、数字，key必须是唯一的 由于历史遗留问题，in也可以写作of 还可以写两个参数的形式 v-for="(a,b) in xxx" :key="yyy"，a依旧是内容或值，b是索引或者是键(key) 可遍历：数组、对象、字符串、数字 --> <body> <div id="root"> <!-- 遍历数组 --> <h1>人员列表</h1> <ul> <li v-for="(person, index) in persons" :key="person.id"> {{person.name}}--{{person.age}} </li> </ul> <!-- 遍历对象 --> <h1>动物信息</h1> <ul> <li v-for="(value, key) in animal" :key="key"> {{key}}：{{value}} </li> </ul> <!-- 遍历字符串 --> <h1>字符串遍历</h1> <ul> <li v-for="(char, index) in str" ::key="index"> {{index}}：{{char}} </li> </ul> <!-- 遍历一定次数 --> <h1>遍历一定次数</h1> <ul> <li v-for="(number, index) in 5" :key="index"> {{index}}：{{number}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el: "#root", data: { persons: [ { id: "001", name: "张三", age: 20 }, { id: "002", name: "李四", age: 21 }, { id: "003", name: "王五", age: 22 } ], animal: { name: "狗", color: "灰色", price: "100元" }, str: "HelloWorld" } }) </script> </body> </html>
2.key的原理
虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DON】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下
对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
若虚拟DOM中内容没变,直接使用之前的真实DOM !
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DON。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM,随后渲染到到页面。
用index作为key可能会引发的问题:
（1）若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
（2）如果结构中还包含输入类的DOM:
会产生错误DOM更新==>界面有问题。
开发中如何选择key? :
最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号,学号等唯一值。如果不存在对列表的逆序添加、逆序删除等破坏顺序的功能
使用index作为key是没有间题的。
（本文仅作个人学习记录用，如有纰漏敬请指正）
