Vue中v-for循环语句使用，以及其中key的原理
Posted Mq_sir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中v-for循环语句使用，以及其中key的原理相关的知识，希望对你有一定的参考价值。
Vue中v-for循环语句使用，以及其中key的原理
一、列表渲染
在我们使用v-for的场景中，使用最多的就是用来渲染列表。渲染的数据主要有数组、对象、字符串等。
常用的三种：
- 遍历数组
- 迭代对象
- 字符串
- 遍历指定次数
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue/js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
<h2>人员列表（数组遍历）</h2>
<ul>
<li v-for="p in persons" :key='index'>
{{p.name}}--{{p.age}}
</li>
</ul>
<h2>老王（ 对象遍历）</h2>
<ul>
<li v-for="p in man" :key="index">
{{p}}
</li>
</ul>
<h2>字符串遍历</h2>
<ul>
<li v-for="p in str" :key="index">
{{p}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
man:{
name:'老王',
age:30,
hobby:'干饭'
},
str:'maoxiaoqian',
}
})
</script>
</body>
</html>
小结
v-for指令：
- 大多数用于展示数据
- 基本的语法
v-for="（item,index ）in persons" :key='index',item为每一下项的value值，index为vue给定的标识符，每一个v-for都应该绑定:key为标识符，或者说是索引值。
二、key的原理
key的原理主要就是vue中的Diff算法
-
vue和react一样，都实现了一套虚拟dom,使我们可以不直接操作dom元素，只操作数据就可以重新渲染页面。这就用到Diff比较算法。
-
虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较 -
对比规则：
旧虚拟DOM中找到了与新虚拟DOM相同的key:- 若虚拟DOM中内容没变,直接使用之前的真实DOM !
- 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DON。
旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到到页面。
-
用index作为key可能会引发的问题:
-
若对数据进行:逆序添加、逆序删除等破坏顺序操作;
-
会产生没有必要的真实DOM更新==〉界面效果没问题，但效率低。
-
如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。
- 开发中如何选择key?:
- 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
以上是关于Vue中v-for循环语句使用，以及其中key的原理的主要内容，如果未能解决你的问题，请参考以下文章