列表渲染v-for的使用与key的作用

!!写在最前面

使用v-for时，一定要用key，不要用index作为key的值，数据中没有唯一索引值时，可以和例子中:key="`${value}_${index}`"一样，使用``包住，多个参数值拼接，key值不能重复，必须唯一！

v-for与数组（常用）

// 可以只写item，也可以写(item，index)
// item是迭代项的别名，index是索引值，这两项名称可以随意修改
<div v-for="(item, index) in items" :key="item.id">
  {{ item.msg }} - {{ index }}
</div>
// 执行结果
// 测试数据1 - 0
// 测试数据2 - 1

data() {
  return {
    items: [
      { id: '001', msg: '测试数据1' },
      { id: '002', msg: '测试数据2' },
    ]
  }
}

v-for与对象

// value-属性值，key-属性名，index-索引值，三项名称可随意修改
// 可简写为value、(value, key)
<div v-for="(value, key, index) in myObj" :key="`${value}_${index}`">
  {{ value }} - {{ key }} - {{ index }} 
</div>
// 执行结果
// 张三 - name - 0 
// 14 - age - 1
// 男 - sex - 2

data() {
  return {
    myObj: {
      name: '张三',
      age: '14',
      sex: '男',
    }
  }
}

v-for与字符串（几乎不用）

// item-字符值，index-索引值，两项项名称可随意修改
// 可简写为item
<div v-for="(item, index) in stringItem" :key="`${item}_${index}`">
  {{ item }} - {{ index }}
</div>
// 结果
// 这 - 0
// 是 - 1
// 一 - 2
// 条 - 3
// 测 - 4
// 试 - 5
// 数 - 6
// 据 - 7
// ！ - 8
data() {
  return {
    stringItem: "这是一条测试数据！",
  };
},

v-for与指定次数（几乎不用）

// n-遍历的值，index-索引值
// 可简写为n
<div v-for="(n, index) in 4" :key="`${n}_${index}`">
  值{{ n }} - 索引值{{ index }}
</div>
// 结果
// 值1 - 索引值0
// 值2 - 索引值1
// 值3 - 索引值2
// 值4 - 索引值3

1.v-for可以嵌套，每个v-for作用域都可以访问到父级作用域（像两个嵌套的for循环）；

<div v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.msg }} {{ childItem }}
  </span>
</div>

2.可以用of代替in（常用in，看自己）；

<div v-for="item of items"></div>

3.可以在template上使用；

4.v-if与v-for不可同时使用，因为v-if的优先级较高，会导致v-if的条件无法访问到v-for作用域内定义的变量别名，可以使用<template>标签包装。

<template v-for="item in items">
  <div v-if="!item.isCheck">
    {{ item.name }}
  </div>
</template>

key的作用

1.可以提高渲染效率

key主要作为Vue的虚拟DOM算法（Diff算法）提示，在比较新旧节点列表时用于识别 vnode（虚拟节点）。新的虚拟DOM与初始虚拟DOM会进行对比，若存在不一致时，则会生成新的元素并渲染。若key不存在，则需要全部都生成，影响渲染效率。

2.避免DOM渲染错乱

若使用index等简单的值作为key，像倒序等破坏顺序，就会导致DOM的错误渲染。

学习自用，欢迎大家批评指正~