Vue之列表渲染
- IT业界
- 2025-07-21 19:12:01
总的来说，列表渲染中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). 没有找到,直接生成新的真实DOM 3.用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>
