Vue中key属性的作用

古城微笑少年丶 2022-03-22 04:56 270阅读 0赞

### Vue中key属性的作用 ###

*  在列表渲染时使用key属性
 *  使用key属性强制替换元素

# 在列表渲染时使用key属性 #

相信大多数Vue开发者接触到`key`属性的时候是使用`v-for`进行列表渲染的时候，如果不使用`key`属性，Vue会产生警告，那么在这个时候`key`属性的作用是什么呢？

官方文档中说：

> 当 Vue.js 用`v-for`正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

假设Vue实例的`data`属性中有一个叫`numbers`的变量，它的值是`[1, 2, 3, 7, 8, 9]`：

<div v-for="num in numbers">
      {
       {num}}
    </div>

这种情况下应当是渲染了6个`<div>`元素，其中的内容分别对应`numbers`中6个数字，此时如果`numbers`变成了`[0, 1, 2, 3, 7, 8, 9]`，即在数组头部插入了一个数字`0`，在没有`key`属性的情况下，渲染输出的更新步骤是这样的：

原先内容为`1`的`<div>`元素内容变成`0`，原先内容为`2`的`<div>`元素内容变成`1`，……以此类推，最后新增一个`<div>`元素，内容为`9`。

在这种情况下，Vue会通过改变原来元素的内容和增加/减少元素来完成这个改变，因为没有`key`属性，Vue无法跟踪每个节点，只能通过这样的方法来完成变更。

让我们对以上代码进行一个小修改：

<div v-for="(num, index) in numbers" :key="index">
      {
       {num}}
    </div>

我这里用`index`变量，根据列表渲染的规则，它实际上对应了数组中每个元素的索引，这样做的好处是它可以使得每个元素的`key`值都不同，这是很重要的，如果我们要利用`key`属性的优点，必须保证**同一父元素的所有子元素有不同的`key`属性**。

此时如果`numbers`从`[1, 2, 3, 7, 8, 9]`变成了`[0, 1, 2, 3, 7, 8, 9]`，渲染输出的更新步骤就变化了：

新增一个`<div>`元素，它的内容为`0`，并将它插入原先内容为`1`的元素之前。

在有了`key`属性之后，Vue会记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有`key`属性时的就地复用策略效率更高。

总体来说，当使用列表渲染时，永远添加`key`属性，这样可以提高列表渲染的效率，提高了页面的性能。

# 使用key属性强制替换元素 #

`key`属性还有另外一种使用方法，即强制替换元素，从而可以触发组件的生命周期钩子或者触发过渡。因为当`key`改变时，Vue认为一个新的元素产生了，从而会新插入一个元素来替换掉原有的元素。

借用官方文档上的例子：

<transition>
      <span :key="text">{
       {text}}</span>
    </transition>

这里如果`text`发生改变，整个`<span>`元素会发生更新，因为当`text`改变时，这个元素的`key`属性就发生了改变，在渲染更新时，Vue会认为这里新产生了一个元素，而老的元素由于`key`不存在了，所以会被删除，从而触发了过渡。

假如没有`key`属性：

<transition>
      <span>{
       {text}}</span>
    </transition>

那么当`text`改变时，Vue会复用元素，只改变`<span>`元素的内容，而不会有新的元素被添加进来，也不会有旧的元素被删除。

同理，`key`属性被用在组件上时，当`key`改变时会引起新组件的创建和原有组件的删除，此时组件的生命周期钩子就会被触发。

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue scoped属性的作用

当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素。作用功能：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块虽然

深藏阁楼爱情的钟/ 2023年02月13日 11:44/ 0 赞/ 153 阅读

相关 v-for中key属性的作用

v-for中key属性的值应唯一，起到身份认证的作用，避免v-for“就地更新”策略导致的问题。 > 官方说法：v-for中key 主要用在 Vue 的虚拟 DOM 算法，在

谁践踏了优雅/ 2023年01月09日 14:10/ 0 赞/ 107 阅读

相关 vue key属性详解

> 本文解决的两个问题 > > key的作用？ > key使用id与index的区别？一、key的作用 > 作为一个DOM节点的标识值，结合Dif

桃扇骨/ 2022年12月23日 04:59/ 0 赞/ 155 阅读

相关 vue中的$listeners属性作用

一、当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"

深碍√TFBOYSˉ_/ 2022年12月13日 04:39/ 0 赞/ 163 阅读

相关 Vue和react 列表项中key作用

其实不只是vue、react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，

ゝ一世哀愁。/ 2022年11月17日 11:22/ 0 赞/ 181 阅读

相关 Vue学习（四）v-for中key的作用

① 虚拟 DOM 中 key 的作用 `key`是虚拟`DOM`对象的标识，当数据发生变化时，`Vue`会根据【新数据】生成【新的虚拟`DOM`】，随后`Vue`进行【新虚拟

谁借莪１个温暖的怀抱￠/ 2022年09月10日 03:13/ 0 赞/ 167 阅读

相关 vue：style标签中的scoped属性（作用域）和lang属性的介绍

1、什么是CSS预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增

叁歲伎倆/ 2022年09月02日 04:15/ 0 赞/ 204 阅读

相关 Vue2.x之v-for中:key的作用

其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和

忘是亡心i/ 2022年05月21日 10:59/ 0 赞/ 159 阅读

相关 Vue中key属性的作用

Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到`key`属

古城微笑少年丶/ 2022年03月22日 04:56/ 0 赞/ 271 阅读

相关 VUE router-view key 属性解释

router-view 作用，你可以 `router-view` 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。 <template>

客官°小女子只卖身不卖艺/ 2021年12月23日 02:39/ 0 赞/ 557 阅读