Vue之key值的解读

最新推荐文章于 2024-02-02 09:18:21 发布

姜泥断了姒

最新推荐文章于 2024-02-02 09:18:21 发布

阅读量1.3k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_46772005/article/details/124806850

版权

一、为什么会存在key值这个属性？

当元素之间进行对比的时候，如果元素有key值，那么直接通过key值进行比较

二、key值的注意事项

1、一旦使用v-for指令，必须设置key值

2、如果key值设置的是index下标，并且添加数据时，不是逆序的，那么可以使用

3、key值建议使用ID

下面我用代码，解释为什么最好不要用index作为key的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../public/js/vue.min.js"></script>

</head>
<body>
<div id="app">
<ul>
    <li v-for="(item,index) in obj" :key="index">
        序号:{{index}}
        >>>>>>>>
        ID:{{item.id}}
        >>>>>>>>
        姓名:{{item.name}}
        >>>>>>>>
        <input type="text">
    </li>
</ul>

    <ul>
        <li v-for="(item,index) in obj" :key="item.id">
        序号:{{index}}
        >>>>>>>>
        ID:{{item.id}}
        >>>>>>>>
        姓名:{{item.name}}
        >>>>>>>>
        <input type="text">
        </li>
    </ul>
    <button @click="addObj">添加数据</button>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            obj:[{
                id:1001,
                name:'姜泥',
            },{
                id:1002,
                name:'徐凤年',
            },{
                id:1003,
                name:'白狐脸儿',
            },]
        },
        methods:{
            addObj(){
                let arr = {
                    id:1004,
                    name:'鱼幼薇',
                }
                //当key的值为index下标的时候，添加数据的时候，
                //只要是正序就没问题
                // this.obj = [...this.obj,arr]

                //当是倒序的时候
                //因为key值为index所以，当倒序添加的时候，
                //前面的数据正常进行数组循环，而后面的input框，
                //因为添加的数据为倒序，index重新打乱了，
                //导致新增的数据index为0，原本是姜泥的input框，
                //变成了鱼幼薇的input，而最后一个没有input框
                //所以重新创建了input，而且里面没有内容
                this.obj = [arr,...this.obj]
                //所以key的值，必须为id
            }
        }
    })
</script>

如何测试：

当数据渲染出来后，我们自己在input框里面，手动添加，这个数据的id，序号或名称

key值为index下标的时候，正序添加数据，没有任何问题，但当倒序添加的时候，就会发现我上面提到的问题

但key值为id的时候，无论正序还是倒序都没有任何问题，所以建议key的值为id

姜泥断了姒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue之key值的解读

一、为什么会存在key值这个属性？当元素之间进行对比的时候，如果元素有key值，那么直接通过key值进行比较二、key值的注意事项1、一旦使用v-for指令，必须设置key值2、如果key值设置的是index下标，并且添加数据时，不是逆序的，那么可以使用3、key值建议使用ID下面我用代码，解释为什么最好不要用index作为key的值<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫