vue v-for循环的key值使用注意事项

vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错.
使用方法:
1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key。

2.使用template作为循环语句的元素时,key值添加在template内的第一级子元素上.例如:

    <template v-for="item in routers">
        <el-submenu :index="item.path" v-if="item.children&&item.children.length" :key="item.path">
          <template slot="title">
            <i class="icon iconfont" :class="item.meta.icon"></i>
            <span>{{item.meta.title}}</span>
          </template>
          <el-menu-item
            :index="val.path"
            :route="val.path"
            v-for="val in item.children"
            :key="val.name"
          >
            <template slot="title">
              <span>{{val.meta.title}}</span>
            </template>
          </el-menu-item>
        </el-submenu>
        <el-menu-item :index="item.path" :route="item.path" v-else :key="item.path">
          <template slot="title">
            <i class="icon iconfont" :class="item.meta.icon"></i>
            <span>{{item.meta.title}}</span>
          </template>
        </el-menu-item>
      </template>

 使用v-for循环的时候，key值是必不可少的，这点需要尤其的注意。