vue3: 使用的技术栈:
1.接口数据与前端交互数据隔离(优点: 避免直接修改接口返回数据,导致接口数据状态不一致,尤其在接口数据需要多个地方使用) 使用loadsh库中的deepclone
2.前端接口用到vueuse库中的hook useAsyncState,对于相比于手动处理对于接口处理的更加完善
3.前端在处理金额问题使用到bigNumber库,可以更加精确到处理金额之间的加减乘除法
4.前端对于金额保留千分位使用到Intl.NumberFormat方法,方便处理千分位的转化问题
5.对于前端防抖提交,采用的是1.采用自带element元素绑定的loading属性2.采用lodash中的debouce函数
6. 前端对于全局数据状态管理,vue3采用的是pinia,函数式设置取用状态,方便不同模块管理
7.前端对于前端单独处理数据,给处理数据赋值唯一id,用到的是uuid。
性能优化:
1.前端处理数据,避免使用二次以上的嵌套遍历,容易产生性能问题,可替代方案,只做一层遍历,使用Map结构数据优势优化
2. 尽量保证代码功能的单一性,每一个函数方法尽量只做一件事,增加代码可复用性,避免增加额外的逻辑,带来性能和阅读性问题
3.前端对于大数据量显示的使用虚拟列表去实现的,对于仅仅显示的使用的数据可以使用冻结数据响应式
4. 运用设计模式(工厂模式&策略模式等对于代码可读性和健壮性进行优化)