一.key是什么

key在Vue中是DOM的标识,它只会作用于虚拟DOM中,并不会在真实DOM中展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>

    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<div id="root">
    <h2>人员列表</h2>
    <ul>
        <li v-for="(p,index) in persons" :key='index'>
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>
<body>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                persons:[
                    {'id':'001', 'name':'张三','age':'18'},
                    {'id':'002', 'name':'李四','age':'19'},
                    {'id':'003', 'name':'王五','age':'20'}
                ]
            }
        })
    </script>
</body>
</html>

在浏览器上,key是不会在真实的DOM中展示,而且一般展示列表可以默认用索引来做key,但是对于一些破坏顺序的操作,例如后面带有输入框并且有内容,用index作为key值顺序就会错乱导致出现不必要的视觉问题,最好用唯一的值,例如ID作为key值

二.key的作用

key在虚拟DOM有很大的作用,当一组数据给到Vue去渲染到页面中,会先生成虚拟DOM,然后再根据虚拟DOM去生成真实DOM,但是Vue会拿到新的虚拟DOM和旧的虚拟DOM做对比,如果没有就新增,有的话就保留,这时候key就起到很重要的作用,当元素的key是相同的时候不会去操作DOM,只会操作新增的DOM,大大的提升效率

三.key用index或者唯一值的区别

当key为index时: 当数据后面带有输入框,使用index作为key值的时候,对数据头部进行新增或者删除,新文本替换旧文本。输入类型的 Dom 节点内容一样，直接使用旧元素，这时就出错了.当key为唯一值时:就可以完美避开这种问题的存在,同时效率也会提升

Vue中Key的作用

一.key是什么

二.key的作用

三.key用index或者唯一值的区别