Vue踩坑总结

axios delete 415

axios.delete('/api',{data:{id:1}}) axios 的delete 方法与post、put不一样，要用data包裹一层，原理是delete第二个参数是config的data不是单纯的data

axios request.upload.addEventListener is not a function

axios使用监听进度条函数就报request.upload.addEventListener is not a function

原因：mockjs改变了XhrRequest对象的名称，改成了MockXhrRequest 解决：关闭mockjs

vuex getter更新不及时

state改变但是getter不改变 可以把getter改为一个函数，每次调用都调用一下函数就肯定刷新了

hasBaseInfo: state => () => !(state.user.nickName === state.user.name || !state.user.gender)

keepAlive

better-scroll与keep-alive一起使用会使页面卡住

activated () { // 只有keep-alive才会触发的声明周期函数
  this.$refs.scroll.refresh() || this.$refs.scroll.forceUpdate()
}

include/exclude中的值匹配的不是route的name而是组件中声明的name

router.beforeEach 拦截页面，访问的第一页拦截不到

router.beforeEach要写在new Vue()之前

同名路由跳转不更新页面

• id用computed计算,不在data里面声明
• 页面绑定key, :key='id', id不同就会渲染。diff的原因(会比较tag与key的改变)

computed缓存问题

如果computed计算的是对象的几个属性，而初始化对象属性没有声明，则计算出来的属性不会实时改变

解决：对象需要计算的属性，初始化的时候就声明

provide -> 子孙组件inject属性, watch不到更新

• provide的属性使用对象属性 pos: {x: 0, y: 0}, 并使用$set更新pos
• 子孙组件watch开启deep

项目运行遇到的报错总结

webpack-simple

'cross-env' 不是内部或外部命令，也不是可运行的程序 或批处理文件

• 删掉node_modules，重新npm install

regeneratorRuntime is not defined

• 原因: 项目中使用 async await处理并行多个异步,是因为项目中没有使用transform-runtime将es6+转换成es5

• 不建议使用babel-polyfill，因为这个太大了，现在6.0版本的babel改成了插件的形式，现在推荐的是transform-runtime

• 解决:

    npm i babel-plugin-transform-runtime -D

.babelrc配置

"plugins": [
      [
        "transform-runtime",
        {
          "helpers": false,
          "polyfill": false,
          "regenerator": true,
          "moduleName": "babel-runtime"
        }
      ]
  ]

使用less报错 Module build failed: TypeError: loaderContext.getResolve is not a function

• 原因: less版本过高
• 解决：npm install less-loader@4.1.0 --save