v-for中v-bind:key绑定的参数区别
2018-11-27 14:08
337 查看
<li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id">{{item.id}}</li>
1.使用给数组对象绑定的id属性
// items data
items: [ { id: 2, }, { id: 1, }, { id: 3, }, { id: 4, }, ]
2.使用v-for提供的index参数
3.使用v-for提供的key参数
结论:
1.使用v-for渲染元素时,使用元素自身的id属性去绑定key值有利于单个元素的重新渲染
2.若采用其他如v-for提供的index, key等值,在改变渲染出来的DOM结构时,会触发所有元素的重新渲染,当数据过大时,可能会造成性能负担。
总结:
当我们在使用v-for进行渲染时,尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值,这样在当前渲染元素的DOM结构发生变化时,能够单独响应该元素而不触发所有元素的渲染。
相关文章推荐
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- boost::bind绑定成员函数时,第一个参数传递对象的特殊情况
- iOS开发中的objectForKey和valueForKey在NSDictionary中的区别
- Jquery绑定事件(bind和live的区别)[转]
- jQuery绑定方法的区别 - .bind() / .live() / .delegate() / .on()
- objectForKey和valueForKey的区别
- iOS开发67- valueForKey:和objectForKey:的区别
- 数据绑定时 Eval 和 Bind 的区别
- [jQuery]on和bind事件绑定的区别
- jquery的bind跟on绑定事件的区别
- vue开发中v-for在Eslint的规则检查下出现:Elements in iteration expect to have 'v-bind:key' directives
- springmvc 的参数绑定,springmvc和 struts2的区别
- setValue:forKey:与setObject:forKey:的区别
- jquery的bind跟on绑定事件的区别
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- KVC setvalue:forkey与setvalue:forkeypath的区别
- 数据绑定表达式语法(Eval,Bind区别)
- jQuery事件绑定方法bind、 live、delegate和on的区别
- asp.net数据绑定之Eval和Bind区别