vue指令之v-for
首先创建自定义组件（practice5.vue）：
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2024-07-05 21:28:45
* @LastEditors: Mei
* @LastEditTime: 2024-07-05 21:35:40
* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue
* @Description:
*
* Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div>
<div id="myList" v-for="(item,index) in arr" :key="index">{{ item.name }}
</div>
</div>
</template>
<script>
//列表渲染
//为什么循环的时候需要加key
//1.key的作用主要是为了高效的更新虚拟Dom，提高渲染性能
//2.key属性可以避免数据混乱的情况出现
export default{
data(){
return{
arr:[{
name:"张三"
},
{
name:"李四"
},
{
name:"王五"
}]
}
}
}
</script>
<style scoped>
#myList{
color: blue;
background-color: yellow;
margin-top: 20px;
}
</style>然后再App.Vue中进行引入使用
最后运行结果为：
在使用v-for渲染列表时有几个注意点：
①循环的时候需要加key
1、作用
1.key的作用主要是为了高效的更新虚拟DOM，提高渲染性能。
2.key属性可以避免数据混乱的情况出现。
2、原理
1.vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法
2.当页面数据发生变化时，Diff算法只会比较同一层级的节点；
3.如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；如果节点类型相同，则会重新设置该节点属性，从而实现节点更新
4.使用key给每个节点做一个唯一标识，Diff算法就可以正确识别此节点，"就地更新"找到正确的位置插入新的节点
3、注意
1.key 的值只能是字符串或数字类型
2. key 的值必须具有唯一性（即：key 的值不能重复）
3.建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
4.使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性，实际项目中如果没有id，推荐使用index）
5.建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）
所以，简而言之，在实际的开发中，上面的数组列表一般是后端返回出来的数据，我们需要使用v-for将这些数据进行渲染，但是在使用v-for的时候也必须要加key，并且key的取值要有唯一性，一般都是数据的ID，比如学生列表的学生ID，或商品列表中的商品ID。这样我们在操作这个列表中就不会出现数据混乱的情况。
