营销型网站可以吗,软件开发价格标准,如何在微信上建立公众号,欧美网站建设排名Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验#xff0c;点这里 v-for响应式key, index及item.id参数对v-bind:key值造成差异研究 实验背景 通常情况下#xff0c;我们渲染一个li列表#xff0c;采用…Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验点这里 v-for响应式key, index及item.id参数对v-bind:key值造成差异研究 实验背景 通常情况下我们渲染一个li列表采用v-for指令进行渲染我们需要给渲染的每一项元素绑定一个key值其实绑定该key值是可选的但会引起警告。使用v-for参数的过程中由于v-for提供三个参数分别是: value, key, index。对其哪一个作为元素绑定key值更能得到我们想要的响应式渲染作出实验。 实验目的 总结出在采用不同参数作为元素绑定key值时出现的不同的渲染结果得出最优渲染方案 实验准备 我们准备第三个可以作为绑定key值的变量分别是: 渲染item自带属性idv-for提供的keyv-for提供的index我们制定一个参照表格 li绑定key值类型idindexkey实验一选取xx实验二x选取x实验三xx选取实验一 li绑定key值为自带属性id分别控制两个变量改变id值对li进行排序实验vue.js代码 // items data
items: [{id: 2,},{id: 1,},{id: 3,},{id: 4,},
] !-- dom constructor --
templatediv classcontentulli classanimate对照组/lili v-for(item, key, index) in items classanimate v-bind:keyitem.id{{item.id}}/li!-- 当前绑定值为item.id --/ul/div/div
/template 首先使用了item.id作为绑定的key值我们来看下效果渲染效果demo 改变第一个元素的id值第一个li元素重新渲染其余三个li元素与对照组速度始终保持一致没有变化说明li元素单独渲染为了验证1.观点我们对实验组按照升序进行排列查看DOM结构当改变第一个元素位置时第一个li元素重新渲染其余三个li元素不重新渲染且与对照组速度始终保持一致说明第一个li元素单独渲染验证1.结论实验二 li绑定key值为 v-for提供的index参数分别控制两个变量改变id值对li进行排序实验vue.js代码 // items data
items: [{id: 2,},{id: 1,},{id: 3,},{id: 4,},
] !-- dom constructor --
templatediv classcontentulli classanimate对照组/lili v-for(item, key, index) in items classanimate v-bind:keyindex{{item.id}}/li!-- 当前绑定值为index --/ul/div/div
/template 在实验二中使用v-for提供的index参数作为绑定的key值我们来看下效果渲染效果demo 改变第一个元素的id值第一个li元素与其余三个li元素与对照组速度始终保持一致没有变化说明绑定index值并未对li渲染造成影响为了验证1.观点我们对实验组按照升序进行排列查看DOM结构当改变第一个元素位置时第一个li元素重新渲染其余三个li元素也重新渲染均且与对照组速度始终保持一致说明所有li元素均重新渲染验证1.结论实验三 li绑定key值为 v-for提供的key参数分别控制两个变量改变id值对li进行排序实验vue.js代码 // items data
items: [{id: 2,},{id: 1,},{id: 3,},{id: 4,},
] !-- dom constructor --
templatediv classcontentulli classanimate对照组/lili v-for(item, key, index) in items classanimate v-bind:keykey{{item.id}}/li!-- 当前绑定值为key --/ul/div/div
/template 在实验二中使用v-for提供的key参数作为绑定的key值我们来看下效果渲染效果demo 改变第一个元素的id值第一个li元素与其余三个li元素与对照组速度始终保持一致没有变化说明绑定key值并未对li渲染造成影响为了验证1.观点我们对实验组按照升序进行排列查看DOM结构当改变第一个元素位置时第一个li元素重新渲染其余三个li元素也重新渲染均且与对照组速度始终保持一致说明所有li元素均重新渲染验证1.结论实验结论 经过三次对照实验我们的实验采用了控制变量法对照实验法进行我们可以得出结论使用v-for渲染元素时使用元素自身的id属性去指定渲染元素的key值有利于单个元素的重新渲染若采用其他如v-for提供的index, key等值在改变渲染出来的DOM结构时会触发所有元素的重新渲染当数据过大时可能会造成性能负担。 总结 当我们在使用v-for进行渲染时尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值这样在当前渲染元素的DOM结构发生变化时能够单独响应该元素而不触发所有元素的渲染。 研究成员 TimRChenlibook 转载于:https://www.cnblogs.com/tim100/p/7262963.html
