如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。

创新互联公司作为成都网站建设公司，专注成都网站建设公司、网站设计，有关企业网站建设方案、改版、费用等问题，行业涉及航空箱等多个领域，已为上千家企业服务，得到了客户的尊重与认可。

就地复用的弊端

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

如上引用自官网，这个模式就是上面的“就地复用”策略。那么是不是依赖子组件状态的列表渲染采用上面的模式就出问题了呢。如下测试代码：

 

  

   
{{ item.title }}
   
{{ item.des }}
   
  
  
 

操作如下：

问题出现了：发生变化时，子组件 没有更新

ps: 测试临时 DOM 状态 (例如：表单输入值)可以参考这个链接 List Rendering and Vue's v-for Directive

key的作用

这个时候引入 key 就可以解决这个问题。 key 的作用是给予一个节点唯一的身份识别，有相同父元素的子元素必须有独特的 key 。这样它可以前后对比，算出哪些节点是要重复使用或者调整顺序。比如原先的 key 的顺序是 i1,i2,i3 ，之后变成了 i2,i1,i3 这个时候只要i3保持不变，把i2 insertBefore 到i1节点前就行了（以上是举例，vue具体怎么操作的需要去研究源码）。如果是利用数组的 index 来作为 key 则两次对比没有区别，就会出现上面动图里出现的子组件没有更新的情况。

可以通过查看下面两个动图查看dom节点的变化。第一个gif是没有使用 key ,第二个是使用了 key 。可以看到我点了按钮后，第一个只是更新

标签的内容节点。第二个是移动了某一项的

Hello
Goodbye

 
Hello
 
Goodbye