详细解释如何理解vue的关键属性

如果没有这样的属性，vue会应用就地修补策略。当列表中的顺序发生变化时，例如shuffle，vue不会移动dom元素，而只会更新相应元素的内容节点，以提高性能。

本地重用的缺点

这种默认模式是高效的，但它仅适用于不依赖于子组件状态或临时DOM状态(例如，表单输入值)的列表呈现输出。

从官网引用来看，这种模式就是上面的“重用到位”策略。那么，使用上述模式进行依赖于子组件状态的列表渲染有问题吗？以下测试代码：

ul Li v-for=' items in items ' p { { item . title } }/p p { { item . des } }/p tweet-component/tweet-component/Li/ul script vue.component(' tweet-component '，{ template : ` div class=' tweet ' div class=' box ' { Xixi } }/div/div `，data(){ return { Xixi : math . random()}；} });new Vue({ El : ' # app }，data : { items :[{ title : ' nihao 1 '，des: ' xiexie1 ' }，{ title: 'nihao2 '，des: ' xiexie2 ' }，{title :' nihao3 '，des:' xixie3'})，方法： { shuffle(){//lodash this的shuffle方法。items=_。洗牌。物品)；} } });/script操作如下：

问题出现了：当发生变化时，子组件不会更新

ps:测试临时DOM状态(例如，表单输入值)可以参考这个链接列表呈现和vue的v-for指令

钥匙的作用

这时，引入key就可以解决这个问题。密钥的作用是给节点一个唯一的标识。具有相同父元素的子元素必须具有唯一键。这样，它可以比较前后，并找出哪些节点应该按顺序重用或调整。比如原来的键序列是i1，i2，i3，然后就变成了i2，i1，i3。此时只要i3不变，把i2 insertBefore放在i1节点就足够了(以上是一个例子，具体操作vue需要研究源代码)。如果使用数组的索引作为关键字，两次比较没有区别，上图中的子组件不会更新。

您可以通过查看下面两个动画图来查看dom节点的变化。第一个gif不使用密钥，第二个gif使用密钥。可以看到，我点击按钮后，第一个只是更新P标签的内容节点。第二种是移动一个项目的li标签。

另外，ps:可以通过chrome的dom断点功能查看子元素的插入和删除。

DOM更改断点

钥匙的其他用途

键不仅可以用在v-for上，也可以用在其他元素上。以下代码

Div v-if=' toggle ' hello/div div v-else再见/div切换时，也是切换div。如果要使用进入/离开动画，即在插入和删除节点时，应该中断这种重用，如下所示：

过渡div v-if=' toggle '键=' 1' hello/div div v-else键=' 2 '再见/div/过渡摘要

如果您的列表没有变化，或者您只是在列表的最后一项中添加了一个元素，则似乎没有必要添加关键字字段。但是当您的项目中有许多列表时，其中一些需要添加关键字，而另一些则不需要。最好全部加起来，避免别人理解困难。

参考链接

https://vuejs.org/v2/guide/list.html#key

vuejs.org/v2/api/#key

https://forum . vuejs . org/t/simple-说明何时使用带v的钥匙是合适的，以及为什么这样做/28966/5

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。