vue之key篇

我心飞翔 分类:javascript

1. key作用:

保证唯一性,防止重复渲染,导致的额外性能开销
作为唯一标识节点加速虚拟DOM渲染
最常见的用例是结合 v-for:

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
 

注:有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
错误报错信息

以下是否出现报错信息的场景:

例1:相同父级使用index出现报错信息

clipboard.png

<div class="page">
  <div class="oneSection">
    <el-button
      v-for="(item, index) in displayData"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
    <el-button
      v-for="(item, index) in displayData"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
  </div>
</div>
 

例2:相同父级使用id作为key值没有出现报错信息

<div class="oneSection">
  <el-button
    v-for="item in displayDataOne"
    size="medium"
    :key="item.id"
  >{{ item.name }}
  </el-button>
  <el-button
    v-for="item in displayDataTwo"
   size="medium"
   :key="item.id"
 >{{ item.name }}
 </el-button>
</div>
 

例子3:不同的父级元素使用index没有出现报错信息

<div class="page">
  <div class="oneSection">
    <el-button
      v-for="(item, index) in itemOne"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
  </div>
  <div class="twoSection">
    <el-button
      v-for="(item, index) in itemTwo"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
  </div>
</div>
 

2. 同一父级下的规避方法

- 法一

<div>
    <div v-for="(item, i) in itemOne" :key="i"></div>

    <div v-for="(item, i) in itemTwo" :key="'A'+ i"></div>

    <div v-for="(item, i) in itemThree" :key="'B'+ i"></div>
</div>
 

- 法二

使用能代表该数据的唯一性的值作为key值,例如id,前提是需要渲染的数据里面有id值

<div>
    <div v-for="item in itemOne" :key="item.id"></div>

    <div v-for="item in itemTwo" :key="item.id"></div>

    <div v-for="item in itemThree" :key="item.id"></div>
</div>
 

注:A,B 字符可以替换成你自己定义的任意字符,只是为了保证key的唯一性

为什么使用v-for时必须添加唯一的key?

回复

我来回复
  • 暂无回复内容