你知道vue中key的原理吗?说说你对它的理解,vue key原理
主要介绍了Vue3中key的作用和工作原理，通过实例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
:
目录
1.先说结论2。按键2.1的功能。举个例子2.2。修改上面的例2.3，然后修改例3。重点1的实施原则。键是索引的情况。2.key是id的情况。摘要
1. 先说结论
是keyvue中DOM对象的标识；
显示列表时，默认键是index；
如果数据只是用于显示，那么使用index作为key是没有问题的；
如果使用index作为键，后续的操作会破坏顺序，那么肯定会带来效率问题，严重的话会渲染出错误的DOM。
关于key的功能和实现原理，下面我们来看看。
2. key的作用
Key是一个logo，用在Vue里。更详细地说，密钥是在Vue中的虚拟DOM中使用的，并不出现在真实DOM中。
2.1 举一个例子
以列表的形式展示一组人员信息。
！声明文档类型
html lang=en
头
meta charset=UTF-8
所有权原则
！-介绍vue -
脚本类型=text/javascript src=./js/vue.js/script
/头
div id=root
H2人物列表/h2
保险商实验所
li v-for=(p，index) in persons
{{p.name}}-{{p.age}}
/李
/ul
/div
身体
脚本类型=文本/javascript
const vm=new Vue({
el:#root ，
数据：{
人员：[
{id:001 ，姓名:张三，年龄: 18}，
{id:002 ，姓名:李四，年龄: 19}，
{id:003 ，姓名:王五，年龄: 20}
]
}
})
/脚本
/body
/html
该html文件在浏览器中打开，如下图所示。
但是，在上面的示例html文件中没有使用该键，似乎没有问题。当然，单纯显示数据而不写key也不会有问题。
现在让我们在上面的例子中添加key，其中每一段数据的id都是key。
li v-for=(p，index) in persons :key=p.id
{{p.name}}-{{p.age}}
/李
带键的显示结果和上图一模一样。
而如果我们查看浏览器中的元素，就看不到key的存在了。
到目前为止，我们可以得到两个结论：1 .只是为了数据显示，不写key也没什么影响；2 .密钥不会出现在真正的DOM中
其实就算不写key，Vue在生成真实DOM的时候也是用key的，默认是数据索引。
我们用index替换key，显示的数据不会改变什么。
李v-for=(p，index) in persons :key=index
{{p.name}}-{{p.age}}
/李
2.2 修改一下上述示例
在显示人员信息的基础上显示索引，在头部增加一个具有添加人员信息功能的按钮。
稍微修改一下上面的html文件。
！声明文档类型
html lang=en
头
meta charset=UTF-8
所有权原则
！-介绍vue -
脚本类型=text/javascript src=./js/vue.js/script
link rel=icon href=./favicon . ico type= image/x-icon /
/头
div id=root
H2人物列表/h2
Button @click=add 添加一个老刘/button
保险商实验所
李v-for=(p，index) in persons :key=index
{{p.name}}-{{p.age}}-{{index}}
/李
/ul
/div
身体
脚本类型=文本/javascript
const vm=new Vue({
el:#root ，
数据：{
人员：[
{id:001 ，姓名:张三，年龄: 18}，
{id:002 ，姓名:李四，年龄: 19}，
{id:003 ，姓名:王五，年龄: 20}
]
},
方法：{
add(){
Const p={id:004 ，姓名:老刘，年龄: 40}
this.persons.unshift(p)
}
}
})
/脚本
/body
/html
我们可以看到张三，李四，王五的指数分别是0，1，2。
单击按钮添加新角色。这时候指数就变了，新加的字“老刘”变成了指数0，这似乎是对是错。
当然，单纯讨论指数，这里没有问题。这里有一个新的例子来谈谈“错”。
2.3 再修改一下示例
不显示索引，而是将其更改为输入框。在每个字符后面的输入框中写下每个字符的姓氏，观察新数据插入后原数据的变化。
稍微修改一下html
李v-for=(p，index) in persons :key=index
{{p.name}}-{{p.age}}
输入类型=文本
/李
实际效果如下图
这里好像没什么问题，接下来就是见证奇迹了。
补充一下老刘，有个问题，和我们预想的不一样。
这是索引键的情况。如果修改为数据的唯一标识符，就不会出现这个问题。
li v-for=(p，index) in persons :key=p.id
{{p.name}}-{{p.age}}
输入类型=文本
/李
这就是我们想要的。
列表中有输入内容，后续操作会破坏原来的顺序，导致错误DOM。
3. key的实现原理
解释key的实现原理，要介绍一个很重要的概念Vue的3354【虚拟DOM】。
给定一组数据，Vue要先生成一个【虚拟DOM】，然后根据【虚拟DOM】生成一个【真实DOM】来渲染页面上的数据。如果数据发生变化，Vue会生成【新的虚拟DOM】。注意这个【新虚拟DOM】不会直接生成【新真实DOM】，否则虚拟DOM根本没用。Vue的操作是将新数据生成的【新虚拟DOM】与之前的【真实DOM】进行比较，如果相同就可以直接扩展(“带入”)；如果没有，则生成一个新的DOM对象。
在这个过程中key扮演了很重要的角色。
根据上一个例子来分析。
1. key为index的情况。
从数据生成[real DOM]的过程如下：(注意下图real DOM输入框中的内容是页面生成后手动添加的)
然后，加上“老刘”这个字符，得到一组新的数据。
Vue采用新数据生成[新虚拟DOM]
在生成真实DOM时，需要将新生成的虚拟DOM与原真实DOM进行比较(逐一分析)。
对比第一个，key为0，在旧DOM中找到key为0的数据，找到“老刘-40”和“张三-18”的区别，在页面上渲染新数据“老刘-40”；后来发现同一个输入框不需要重新渲染，直接用原来真实的DOM内容。第一条内容出现，这个输入框也带有张三的姓氏。
对比第二个，key为1，在旧DOM中找到key为1的数据，找到“张三-18”和“李四-19”的区别，在页面上渲染新数据“张三-18”；后来发现同一个输入框不需要重新渲染，直接用原来真实的DOM内容。第二个内容出现，这个输入框也带有李四的姓。
之后也是如此。
回顾这个过程，关键是虚拟DOM中对象的唯一标识符，它标识了数据的“身份信息”。Vue会根据虚拟DOM中的这个“身份”来比较内容。设计的初衷是节省资源支出，没必要渲染重复的部分。这个例子不仅带来了效率问题，还渲染了错误的DOM，后果非常严重。
2. key为id的情况。
直接去加“老刘”后的新旧DOM对比。
对比第一个，键是 004 ，发现旧DOM中不存在，于是直接生成“老刘-40”和一个新的输入框。
对比第二个，key是 001 ，发现旧DOM中key为 001 的数据是一样的，直接带上“张三-18”和输入框使用。
……
最后生成正确的DOM，节省了资源开销。
总结
使用推荐数据的唯一标识符作为关键字，如id、身份证号、手机号等。通常，这些数据是由后端提供的。
如果后续操作不破坏原始数据序列，使用index作为key是没有问题的。
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。