开发过程中的坑（1）

一个程序

已于 2023-11-07 10:54:33 修改

阅读量170

点赞数

文章标签：前端

于 2023-09-25 10:39:53 首次发布

本文链接：https://blog.csdn.net/jibuyueqian/article/details/133172362

版权

v-model.number

问题

使用.number将数据转成 number类型的时候的，当数据数据到第17位的时候，精确度开始丢失，数据数据到22位的时候，数据格式也会发生变化
原因请看之前的js number 类型溢出问题

经验

可以使用type="number"这种方法有个问题就是数据类型依旧是string类型但是能够限制值输入数字

replaceAll

问题

项目中使用replaceAll IE浏览器打不开 replaceAll 不支持ie

经验

使用方法和属性的时候要考虑IE是否兼容，不确定的可以在can i use中查看

弹窗打开没有回显数据

问题

打开弹窗，有时候接口返回的慢，弹窗打开数据还没有返回会有一段时间的空白

经验

添加loading，等接口返回之后在取消loading；按钮的操作需要调用的接口的也需要添加幂等，防止多次调用接口

Modal

问题

this.$Modal.confirm 中使用this.$Modal.error 时候不会正常显示，弹窗会一闪就消失

经验

把this.$Modal.error 放在setTimeout（） 中做个延时一般需要看一下组件的出现延迟的时常，项目中的常用的是300毫秒

计算属性

问题

在一个计算属性变量中使用计算属性中的另一个变量，这个时候会有一个计算属性无限循环的报错
eg：

computed: {
  aa () {
   return  1*123*3333
  }
  bb () {
  return {
   ...this.aa
   ...XXXX
   }
  }
}

经验

方案：使用lodash.cloneDeep()等方法对此类情景下的aa进行深拷贝,不影响源数据。
经验：以后的开发过程中也要充分考虑数据的深浅拷贝导致数据交叉影响的问题。

computed: {
  aa () {
   return  1*123*3333
  }
  bb () {
  return {
   ...lodash.cloneDeep(this.aa)
   ...XXXX
   }
  }
}