Vue全家桶学习笔记第三天

1.11 列表渲染

1.11.1 用法

语法：v-for="item in itemList" :key="item.id" (item是列表项，itemList是列表，key必须指定列表的唯一值)

• 遍历数组

<!-- item表示itemList的每一项,index表示itemList每一项的索引,key指定唯一标识 -->
<li v-for="(item, index) in itemList" :key="item.id">
    {
  {item.name}} - {
  {item.age}}
</li>

• 遍历对象

<!-- value表示对象的值,k表示对象的键,key指定唯一标识 -->
<li v-for="(value, k) in itemList" :key="k">
    {
  {k}} - {
  {value}}
</li>

1.11.2 key的作用

• 虚拟DOM中key的作用

  • key是虚拟DOM对象的标识,当状态中的数据发生改变时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较

• 对比规则:

  • 旧虚拟DOM中找到了与新虚拟DOM相同的ke