本篇内容主要讲解“vue的key怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue的key怎么使用”吧!
成都创新互联公司是专业的西秀网站建设公司，西秀接单;提供成都网站制作、网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行西秀网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
在vue中，key是DOM对象的标识，是给每一个vnode的唯一id，也是diff的一种优化策略；可以根据key，更准确、 更快的找到对应的vnode节点。如果数据只做展示使用，可以使用index作为key；如果使用index作为key，而后续操作会破坏顺序，一定会带来效率问题，严重时会渲染出错误的DOM。
1. key是什么
key在Vue是DOM对象的标识；key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点。
进行列表展示时，默认key是index。
如果数据只做展示使用，使用index作为key是没有任何问题的。
如果使用index作为key，而后续操作会破坏顺序，一定会带来效率问题，严重时会渲染出错误的DOM。
2. key的作用
key就是一个标识，被使用在Vue中。再详细一点，key被使用在Vue中的虚拟DOM中，并不会出现在真实DOM中。
2.1 举一个例子
以列表的形式展示一组人员信息。
key的原理 人员列表
const vm = new Vue({ el:'#root', data:{ persons:[ {'id':'001', 'name':'张三','age':'18'}, {'id':'002', 'name':'李四','age':'19'}, {'id':'003', 'name':'王五','age':'20'} ] } }) 这个html文件在浏览器中打开如下图所示。
而上述示例html文件中并没有使用到key，似乎也没有问题。当然，单纯地展示数据，不写key是不会存在问题的。
现在我们为上述示例加上key，这里以每条数据的id为key
{{p.name}}-{{p.age}}
加上key的展示结果和上图结果一模一样。
.jpg)
而如果我们在浏览器上查看元素，不会看到key的存在。
截至目前，我们可以得到两个结论：1. 只做数据展示用，不写key是没有任何影响的；2.key不会出现在真实DOM中
实际上，即使不写key，Vue在生成真实DOM时，也用到了key，默认是数据索引（index）
我们把key替换为index，展示的数据不会产生任何改变。
{{p.name}}-{{p.age}}
2.2 修改一下上述示例
在展示人员信息的基础上显示索引，并且添加一个按钮，功能是在头部添加人员信息
对上述html文件稍加修改。
key的原理 人员列表
添加一个老刘 {{p.name}}-{{p.age}}-{{index}}
