Vue系列教程（十二）v-for中key的使用注意事项

程序员文章站 2022-03-16 13:09:51

...

2.2.0+ 的版本里，当在组件中使用v-for时，key属性是必须的。

当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已渲染过的每个元素。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排列现有元素，你需要为每项提供一个唯一key属性。

请看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环中key属性的使用</title>
</head>
<body>
<div id="app">
    <div>
        <label>
            Id:
            <input type="text" v-model="id">
        </label>
        <label>
            Name:
            <input type="text" v-model="name">
        </label>
        <input type="button" value="添加" @click="add">
    </div>
    <p v-for="item in list">
        <input type="checkbox">
        {{item.id}} ---- {{item.name}}
    </p>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: '李斯'},
                {id: 2, name: '嬴政'},
                {id: 3, name: '赵高'},
                {id: 4, name: '韩非'},
                {id: 5, name: '荀子'}
            ]
        },
        methods: {
            add() { // 添加方法，在头上添加
                this.list.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>
</body>
</html>

页面效果：
Vue系列教程（十二）v-for中key的使用注意事项
我们选中5 ---- 荀子，输入Id、Name添加一条数据：

添加完成后：

我们发现，默认选中的5 ---- 荀子，添加完数据后自动变成了4 --- 韩非，出现了bug。
这是因为，上面的这种实现方式，Vue只知道我们选中了索引为5的对象，当从头添加一条数据以后，之前索引为4的数据变成了索引5，所以出现了这个bug。
解决方法：
循环的时候指定一个key

<p v-for="item in list" :key="item.id">
        <input type="checkbox">
        {{item.id}} ---- {{item.name}}
    </p>

注意：

v-for循环的时候，key属性只能使用number或者string
key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型:key的值

Vue系列教程（十二）v-for中key的使用注意事项

Vue中的v-for循环key属性注意事项小结

Vue学习之路第十四篇：v-for指令中key的使用注意事项

Vue中的v-for循环key属性注意事项小结

荐 Vue中v-for配合key使用的重要性

在项目碰到在vue中,v-for的索引index在html中的使用方法（详细教程）

Vue学习之路第十四篇：v-for指令中key的使用注意事项

在vue中如何解决v-for使用报红并出现警告的问题（详细教程）

荐 Vue中v-for配合key使用的重要性

在项目碰到在vue中,v-for的索引index在html中的使用方法（详细教程）

Vue系列教程（十二）v-for中key的使用注意事项