Vue列表渲染
react、vue中的key有什么作用? (key的内部原理)
- 虚拟DOM中key的作用: key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM] ,随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较,比较规则如下:
- 对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虚拟DOM中内容没变,直接使用之前的真实DOM!
②.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM,随后渲染到到页面。 - 用index作为key可能会引发的问题:
(1).若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
(2).如果结构中还包含输入类的DOM:
会产生错误DOM更新==>界面有问题。 - 开发中如何选择key?:
(1).最好使用每条数据的唯一标 识作为key,比如id、手机号、身份证号、学号等唯一值。
(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有间题的。
示例:
<div id="app">
<h2>数组遍历</h2>
<ul>
<!--数组遍历-->
<li v-for="(student,index) in students" :key="student.id">{{index}}:{{student.name}}--{{student.age}}</li>
</ul>
<hr>
<h2>对象遍历</h2>
<ul>
<!--对象遍历-->
<li v-for="(value,key) in person" :key="key">{{key}}:{{value}}</li>
</ul>
<hr>
<h2>字符串遍历</h2>
<ul>
<!--字符串遍历-->
<li v-for="(char,index) in str" :key="index">{{index}}:{{char}}</li>
</ul>
<hr>
<h2>数字遍历</h2>
<ul>
<!--数字遍历-->
<li v-for="(number,index) in 5" :key="index">{{index}}:{{number}}</li>
</ul>
<hr>
<hr>
<button @click="addStudent">添加一个学生</button>
<li v-for="(student,index) in students" :key="student.id">
{{index}}:{{student.name}}--{{student.age}}
<input type="text">
</li>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#app',
data: {
students:[
{id:'01',name:'张三',age:20},
{id:'02',name:'李四',age:21},
{id:'03',name:'王五',age:22}
],
person: {
id: '001',
name: '狂徒',
age: 20
},
str: '法外狂徒'
},
methods: {
addStudent(){
this.students.unshift({id:'04',name:'赵六',age:24})
}
}
})
</script>