18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

渲染项目列表时,“key” 属性的作用

2019-12-03 分享
渲染项目列表时,key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。
如果没有使用 key 属性,并且列表的内容发生了改变(例如对列表进行排序),则虚拟 DOM 宁愿使用更新的数据来修补节点,来反映更改,而不是上下移动元素。这是默认模式,非常有效。
当提供唯一的键值 IS 时,将根据对键的更改对元素进行重新排序(并且不使用新数据对它们进行修补),如果删除了 key(例如,删除列表中的项目时),则对应的元素节点也被销毁或删除。
 
这里有一个父组件渲染一个子组件列表。我们看到三个列表项被渲染为三个子组件节点。这些子组件都包含一个 span 标记和一个输入框,可能还包含一个本地状态对象(可选)。现在让我们检查两种情况:
当不使用 key 属性时:例如如果列表已重新排序,则 Vue 会使用重新排序的数据简单地修补已经存在的三个节点,而不用移动这些节点。只要用户没有输入或更改这些子组件中一个或多个子组件的本地状态,此方法就可以正常工作。因此假设用户输入了组件编号为 3的输入框,重新排序列表后,组件编号为 3 的 span 标签内容将呗更改,但是输入框将与用户键入的内容击破状态数据一起保留在这里。这是因为 Vue 无法识别组件编号 3,它只是重新修补它所看到的更新数据,即 span 标签的内容。
 
 

在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图