Vue中key值之坑

最新推荐文章于 2022-04-04 11:14:08 发布

秋英之空

最新推荐文章于 2022-04-04 11:14:08 发布

阅读量1.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_38152997/article/details/97957191

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue中在循环数据时 key值的设置大大简化了性能，然而坑依然无处不在请避免给key设置数据的索引值
话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id='app'>
        <li :key='index' v-for='(items,index) in arr'>
            <input type='checkbox'> <span>{{items.name}}</span>
        </li>
        <button v-on:click='add'> 从后追加 </button>
        <button v-on:click='unshif'> 从前添加 </button>
    </ul>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                arr: [
                    { id: 1, name: '张飞', age: 78 },
                    { id: 2, name: '关羽', age: 79 },
                    { id: 3, name: '赵云', age: 78 },
                ],
                id: 3
            },
            methods: {
                add() {
                    this.id++;
                    this.arr.push({ id: this.id, name: '刘备', age: 88 })
                    console.log(this.arr);
                },
                unshif: function () {
                    this.id++;
                    this.arr.unshift({ id: this.id, name: '刘备', age: 88 })
                    console.log(this.arr);
            
                }
            },
        })
    </script>
</body>
</html>

案例是给数组添加项并渲染到页面 key值使用index设置的。从尾部追加没有任何毛病ok
然后从头开始添加状态就发生了改变*
新增加的刘备状态应该是未选中结果却是选中状态这是为何？

在这里插入图片描述
刘备状态出错原因
key值不能用index来设定要给一个唯一的值
key值有个diff算法渲染时如果有相同的key则不渲染dom节点不更新
因为在没有添加元素之前就存在索引为0 的这一项状态是checked ，由于
增加之后刘备这一项索引为0 索引没有更新checked状态
解决方案：设置key的时候给一个唯一值id key是为了加快性能有相同id就
不在更新元素在大量数据中添加值时不用再一次次遍历大大节省了性能

秋英之空

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中key值之坑

Vue中在循环数据时 key值的设置大大简化了性能，然而坑依然无处不在请避免给key设置数据的索引值话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...
复制链接

扫一扫

专栏目录