key属性的作用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_71213173/article/details/128050162

本文探讨了Vue中key属性的作用，包括提升v-for渲染效率、优化性能和避免数据混乱。通过一个实例展示了未使用key时，v-for在列表更新时可能出现的状态绑定错乱问题。解决方案是在v-for指令中添加key属性，绑定数据的唯一标识，如id，以确保元素正确地被追踪和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.key属性的作用

1. 提升v-for渲染的效率。

2. 提高渲染性能。

3.避免数据混乱的情况出现。

二.v-for中key作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'扎堆'})">添加</button>
        <ul>
            <li v-for="item in list":key="item.arr">
                <input type="checkbox">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
    <!--
        现象：当我勾了夏娃，然后在下标1的位置添加了扎堆，结果发现勾了扎堆，夏娃自己没勾了。
        原因：v-for会尝试最大限度的复用当前元素，导致状态绑定错乱。
        解决：在v-for后加上一个key属性，key绑定这个数据的唯一值（一般是id,不能是字符串和数字类型）

    -->
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'小霞'},
                    {id:2,name:'夏娃'},
                    {id:3,name:'王五'},
                ]
            }
        })
    </script>
</body>
</html>

效果：当我勾了夏娃