vue注重细节的优化(绑定key)

注重细节的优化
绑定key:
key是给美一个vnode的为一id,可以依靠key,准确(更快)拿到oldVnode中对应的vnode节点

开发中偶尔会遇到需要生成唯一id的时候，比如对数组的任意一项进行多次增删改，这时就需要给每一项添加唯一标识符来加以区分。

安装短id生成多位字符串id并且保存至生产包
$ npm i shortid --save

<template><div><h3>遍历数组,带key,这里的key关联phone[唯一性但是有些人会填写错误的]</h3><ul class="left"><li v-for="(listone, index) in listones" :key="listone.phone">{{ index }}:姓名: {{ listone.name }},年龄: {{ listone.age }},性别:{{ listone.sex }},手机号:{{ listone.phone }}</li></ul><br /><h3>添加shortId使其成为真正的唯一性</h3><ul class="left"><li v-for="(listone, index) in listones" :key="listonesKeys[index]">Id:{{ listonesKeys[index] }} ---{{ index }}:姓名:{{ listone.name }},年龄: {{ listone.age }},性别:{{ listone.sex }},手机号:{{ listone.phone }}</li></ul><h3>遍历对象,这里展示数组里面的对象</h3><ul class="left"><li v-for="(item, key) in listones[0]">{{ key }}----{{ item }}</li></ul></div>
</template><script scoped>
import shortId from "shortid";
export default {name: "ListRender",data() {return {listones: [{ name: "姬天道", age: 40, sex: "男", phone: "18898836586" },{ name: "姬老魔", age: 60, sex: "男", phone: "18898836587" },{ name: "陆州州", age: 28, sex: "男", phone: "18898836588" },{ name: "陆阁主", age: 28, sex: "男", phone: "18898836589" },],// 关联生成key,把listones里面的数组各个都生成一keylistonesKeys: [],};},//   在渲染完成之后再调用的mounted() {//   先拿到这个数组然后赋值//   生成唯一性id,把listones里面的数组各个都生成一个idthis.listonesKeys = this.listones.map((v) => shortId.generate());},
};
</script><style scoped>
.left {text-align: left;
}
</style>

vue注重细节的优化(绑定key)相关推荐

Vue项目的性能优化
目录前言一.代码层面的优化 1. **v-if 和 v-show 区分使用场景** 2. **computed 和 watch 区分使用场景** 3. **v-for 遍历必须为 item 添加 ...
有关前端性能优化的方案—Vue 代码层面性能优化+Webpack 层面的优化+基础的 Web 技术优化+非框架代码优化
文章目录: 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch 区分使用场景 1.3.v-for 遍历必须为 item 添加 key,且避免 ...
10个技巧！实现Vue.js极致性能优化（建议收藏）
导语 | Vue是一套用于构建用户界面的渐进式的JavaScript框架.它具有体积小,更高的运行效率,双向数据绑定,生态丰富.学习成本低等优点,所以Vue也被广泛用在移动端跨平台框架上.接下来,我将 ...
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 ...
前端Vue项目打包性能优化方案
文章目录一.前言二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件三.工具推荐可视化分析包大小总结一 ...
Winform开发之ComboBox和ComboBoxEdit控件绑定key/value数据
使用 ComboBox 控件绑定key/value值: 因为 ComboBox 是有 DataSource 属性的,所以它可以直接绑定数据源,如 DataTable.ListItem 等. 使用 Da ...
Vue首屏性能优化组件
Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考 ...
【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
Vue基础-09-表单输入绑定
Vue基础-09-表单输入绑定 Vue中想要操作表单的数据,无需再dom操作.比如登录.注册.添加 Vue中提供了一个指令v-model,可以表单的双向数据绑定双向绑定表单原始上面通过v-mode ...

vue注重细节的优化(绑定key)

vue注重细节的优化(绑定key)相关推荐

最新文章

热门文章