Vue之列表渲染

总的来说，列表渲染中key最好选择数据中唯一！尽量不要默认index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 遍历时都是(value,key) --><!-- 1. 虚拟DOM中key的作用:key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM]随后Vue进行[新的虚拟DOM]与[旧的虚拟DOM]差异比较,比较规则如下.2. 对比规则(1). 旧虚拟DOM中内容没变,直接复用之前的真实DOM若虚拟DOM内容变了,则生成新的真实DOM(2). 没有找到,直接生成新的真实DOM3.用index作为key可能回发生问题(1).对数据进行逆序添加,逆序删除等破坏顺序操作,会进行没有必要的真实DOM更新(2).如果结构包括输入类DOM会产生错误DOM更新.4.key选择(1).最好选择数据的唯一.身份证号等.(2).如果没有逆序,用index也行.--><div id="app"><h2>遍历数组(用的多)</h2><button @click.once="add">添加一个老薛</button><li v-for="(p,index) of persons":key="p.id">{{p.name}}-{{p.age}}<input type="text"></li></div><script type="text/javascript">const vm = new Vue({el:"#app",data(){return {persons:[{id:"001",name:"Barry",age:12},{id:"002",name:"Barry2",age:12},{id:"003",name:"Barry3",age:12},],car:{name:"奔驰E300L",price:"65W",color:"Black"},str:"Barry"}                },methods: {add(){const p = {id:"004",name:"老薛",age:24}this.persons.unshift(p)}},})</script>
</body>
</html>