Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
2018-02-12 15:40
791 查看
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
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提供的key
v-for提供的index
我们制定一个参照表格
li绑定key值类型 | id | index | key |
---|---|---|---|
实验一 | 选取 | x | x |
实验二 | x | 选取 | x |
实验三 | x | x | 选取 |
实验一
li绑定key值为自带属性id分别控制两个变量:改变id值,对li进行排序
实验vue.js代码
// items data items: [ { id: 2, }, { id: 1, }, { id: 3, }, { id: 4, }, ]
<!-- dom constructor --> <template> <div class="content"> <ul> <li class="animate">对照组</li> <li v-for="(item, key, index) in items" class="animate" v-bind:key="item.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 --> <template> <div class="content"> <ul> <li class="animate">对照组</li> <li v-for="(item, key, index) in items" class="animate" v-bind:key="index">{{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 --> <template> <div class="content"> <ul> <li class="animate">对照组</li> <li v-for="(item, key, index) in items" class="animate" v-bind:key="key">{{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
相关文章推荐
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- Vue2.0中v-for迭代语法变化(key、index)【转】
- Vue2.0中 v-for指令中的key用法
- vscode编写vue代码v-for时出现Elements in iteration expect to have 'v-bind:key' directives.
- Vue2.0 v-for 中 :key 到底有什么用?
- Vue2.0 v-for 中 :key 的作用
- vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
- vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名
- 在v-for中利用index来对第一项添加class(vue2.0)
- vue开发中v-for在Eslint的规则检查下出现:Elements in iteration expect to have 'v-bind:key' directives
- vue2.0——v-bind
- Effective Objective-C 2.0:Item 50: Use NSCache Instead of NSDictionary for Caches
- IOS开发之NSDictionary里setValue:forKey与setObject:forKey、objectForKey与valueForKey的差异
- vue-router2.0 组件之间传参及获取动态参数
- objectForKey与valueForKey在NSDictionary中的差异
- - (id)valueForKeyPath:(NSString *)keyPath 用法总结
- objectForKey与valueForKey在NSDictionary中的差异
- objectForKey与valueForKey在NSDictionary中的差异
- vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
- asp.net的eval,bind,container.dateitem,数据绑定的研究