vue.js中key的用法

Question

刚学vue.js，看着官方API学习的，文档中的KEY属性一直没搞懂，感觉有key没key没什么区别。

html：
<p>key的使用实例：</p>
<ul>
    <li v-for="item in itemList" :key="item.text">
        <span>{{item.text}}</span>,<span>{{item.value}}</span>
    </li>
</ul>
<ul>
    <li v-for="item in itemList">
        <span>{{item.text}}</span>,<span>{{item.value}}</span>
    </li>
</ul>
js：
var text = new Vue({
    el: ".v-text",
    data: {
        itemList: [
            {text: 1, value: "hi1"},
            {text: 3, value: "hi3"},
            {text: 2, value: "hi2"},
            {text: 4, value: "hi4"},
            {text: 8, value: "hi8"}
        ]
    }
});

在chrome的控制台用js插入itemList的内容，2个ul的效果是一样的，我试过

text.itemList.push({text: 9,value : "hi9"})
text.itemList.push({text: 1,value : "hi11"})

没发现有什么不同的， 求大神帮忙解答下vuejs中key的用法

Answer 1

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值.
建议尽可能使用 v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。因为它是 Vue 识别节点的一个通用机制， key 并不特别与 v-for 关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

详细可见官网：
https://cn.vuejs.org/v2/guide/list.html#key

Answer 2

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

这才是正确的写法吧

组件渲染才这样做 <my-component v-for="item in items" :key="item.id"></my-component>

Answer 3

类似1.0中的track-by

有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

http://v1-cn.vuejs.org/guide/...