前端开发 踩坑总结

1，Vue

• 当动态import路由懒加载时。如果Vue文件中的css也被import动态引入，可能会导致页面样式加载不及时，渲染出现问题，影响业务代码的逻辑。
• window.close 关闭当前页面时，在Vue中直接跳转至根路由，当前页面不能关闭
• element插件中，input的change事件，只在失去光标切内容改变时触发，要想实时触发，需要绑定@input事件
• router 当同一路由push多次时会报错，解决方案。在router.js中重写push方法

  const routerPush = Router.prototype.push
  Router.prototype.push = function push(location) {
      return routerPush.call(this, location).catch(error => error)
  }

2，Vuex

• Vuex state的值尽量避免直接使用this.$state取值(存储复杂数据类型，不会修改引用，当修改原始数据时，储存的内值也会自动被更该)。应采用官方建议getters或者mapGetters取值。

3，build

• build打包时，如果代码被压缩。业务代码中不要使用动态获取Class.name等操作，获取后的值是被压缩过后的

4，JavaScript

• 在js中定义class类 Import其他定义js文件时，可能会遇到循环引用的问题
• 在js中操作DOM时 offsetX,offsetY 获取到的值 并不一定是绑定事件的元素边界，距离鼠标的位置，而是目标点击元素边界，距离鼠标的位置 ---（target）边界距离鼠标的位置。
• JSON.parse(JSON.stringify())不止会丢失方法，还会把正则丢失！

5，parcel

• 再打包时，静态文件目录不会做处理，导致丢失文件。 如new Worker('XXX.js')中的XXX.js 不会被打包进dist中。
  解决方案：安装parcel-plugin-static-files-copy 插件，在package.json中 配置

"staticFiles": {
       "staticPath ": "static"  // 要拷贝的静态文件目录
}
//默认 拷贝到dist 文件中

6，vite

• 1、vite中字体文件会被异步加载 如果同步加载时会显示不出来（如地图中new出画笔 指定符号 第一次将加载不出字体符号）
  解决方案 在index.html中提前使用字体，让vite提前加载字体文件

7，关于请求

• options请求
  （1）跨域请求，非跨域请求不会出现options请求
  （2）自定义请求头
  （3）请求头中的content-type是application/x-www-form-urlencoded，multipart/form-data，text/plain之外的格式
  当满足条件1、2或者1、3的时候，简单的ajax请求就会出现options请求
• axios responseType为blob时怎么处理后端返回错误信息

// 由于后端返回错误信息被blob转换为文件形式 故需要解析为文本格式进行操作
let fileReader = new FileReader();
fileReader.onload = function (fileData) {
    let errJSON = JSON.parse(fileData.target.result);
    // errJSON: 解析完成后后端返回的错误数据
}
fileReader.onerror = function () {
    // 处理读取失败的结果
}
// error.response.data：接收到的后端错误信息数据结构
fileReader.readAsText(error.response.data)

8，elementUI

• 1、element表格 如果unshift 追加数据，行里面有自定义组件的话，DOM将不被重新渲染
• 2、element表格 当有max-height属性时，每行渲染次数将成倍增加
• 3、el-tooltip 组件中 不可以使用注释，使用后会报错
• 4、element 中 $confirm中如果使用promise方式 中调用回调 回调中如果有错误 则会触发$confirm的catch回调
  解决方案 使用$confirm的 callback方式

8，elementPlus

• 1、当强制更改表格横向滚动条高度时，纵向滚动条拖动功能失效