javascript - 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#key

这篇关于javascript - vue.js中key的用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！