key在vue中的使用

用`key`管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
例如官网的栗子：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

以上的代码，在切换不同的登录方式时，vue会复用input，只是替换了placeholder的值。
如果我们不想input被复用，希望切换登录方式时，input是一个全新的input，可以使用key属性添加唯一标识。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

在`v-for`中使用`key`

一般情况下，使用v-for渲染列表时，我们会为每项提供一个唯一的key属性，以保证vue能跟踪每个节点的身份，从而复用和重新排序现有元素。
2.2.0+的版本里，当在组件中使用 v-for 时，key现在是必须的
例如：

1
2
3

<div v-for="item in data" :key="item.id">
    <!-- 内容 -->
</div>

实际应用

接着上一篇 element-ui-前端分页实现

说一下 key在循环中的用法
我们在表格中增加一列

<el-table-column
    label="选择">
    <template slot-scope="{row}">
        <el-checkbox></el-checkbox>
    </template>
</el-table-column>

打开页面，如下所示（设置为20条每页，截图好看～）

勾选第一页第一项数据，然后跳转到第二页，我们惊奇的发现，第二页的第一项处于选中状态，第三页同样。
这是因为vue复用了checkbox
如何才能使其正确显示呢？

1
2
3

<template slot-scope="{row}">
    <el-checkbox :key="row.id"></el-checkbox>
</template>

修正后，数据正常显示。在此，要保证key的值是唯一的,如果没有id，可以使用其他字段，或者两个字段的拼接，如:

1	<el-checkbox :key="row.name+row.idx"></el-checkbox>

以上，仅为key应用的一小部分，更多的应用，希望在以后的工作学习中，细细体会。

用key管理可复用的元素

在v-for中使用key

实际应用

用`key`管理可复用的元素

在`v-for`中使用`key`