vue.js中key的用法

刚学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的用法

回答:

为了给 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

回答:

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

这才是正确的写法吧

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

回答:

类似1.0中的track-by

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注