前端开发 踩坑总结

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）边界距离鼠标的位置。

5，parcel

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

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

4，关于请求

• 1、跨域请求，非跨域请求不会出现options请求
• 2、自定义请求头
• 3、请求头中的content-type是application/x-www-form-urlencoded，multipart/form-data，text/plain之外的格式
• 当满足条件12或者13的时候，简单的ajax请求就会出现options请求

5，elementUI

• 1、element表格 如果unshift 追加数据，行里面有自定义组件的话，DOM将不被重新渲染
• 2、element表格 当有max-height属性时，每行渲染次数将成倍增加