vue使用中的点点滴滴 vue使用中的点点滴滴

之前使用vue开发的小的注意点，遇到的实际问题都没有总结过，时间长了就忘记了
现在开始这篇文章会不定期记录
【vue使用中的点点滴滴】1.在页面A中使用弹框组件B，最好在B中watch 控制显示隐藏的字段进行数据的重置和请求的处理
2.async await 并发执行
（1）继发执行请求

async request () { let typeList = await getTypeList(); let goodList = await getGoodsList(); console.log('typeList', typeList) console.log('goodList', goodList) },

（2）并发执行请求

async request () { let request1 = getTypeList(); let request2 = getGoodsList(); let typeList = await request1; let goodList = await request2; console.log('typeList', typeList) console.log('goodList', goodList) },

3.页面的内容加载依赖接口数据，需要请求多个接口，且后面的接口依赖前面接口的返回数据
（1）created 前面可以使用async
（2）beforeRouteEnter前面可以使用async
（3）接口放在beforeRouteEnter中请求时，页面加载效果较流畅些，放在created中请求的时候静态的图片会先出现，接口数据渲染后出现

created () { console.log('created', new Date()) }, async beforeRouteEnter (to, from, next) { console.log('beforeRouteEnter', new Date())let typeList = await getTypeList( ); let goodList = await getGoodsList( ); console.log('typeList', typeList) console.log('goodList', goodList)next(vm => { // 通过 `vm` 访问组件实例 vm.goodList = goodList.data; vm.typeList = typeList.data; console.log('vm', new Date())}) },

文章图片
在beforeRouteEnter中请求接口执行顺序

async created () { console.log('created start', new Date())let typeList = await getTypeList( ); let goodList = await getGoodsList( ); console.log('typeList', typeList) console.log('goodList', goodList)this.goodList = goodList.data; this.typeList = typeList.data; console.log('created end', new Date())},

文章图片
在created中请求接口执行顺序 4.移动端 vue项目解决点击穿透使用 v-tap，是为了解决点击穿透问题
5.window.addEventListener('scroll', function)
滚动监听事件要放在mounted中
6.横向的tabs ，在被fixed在页面顶端时，当页面内容到底部继续上滑，会发生tabs中的tab消失，原因是使用了-webkit-overflow-scrolling: touch; 去掉后会正常，但是滑动不流畅

文章图片
image.png

线上已验证过，移动端兼容的swiper版本 "swiper": "^3.4.2"

8.filtes中的方法中不能访问this即vue实例
9.如果在vue项目中使用了ui组件库，在main.js引入了组件库css，全局reset样式文件，入口app.vue文件，router.js文件，要注意import时的顺序会影响build时生成的css文件中样式的顺序
建议顺序如下

// 组件库css import 'element-ui/lib/theme-chalk/index.css' // app中有全局样式 import App from './App' //router中import了文件影响文件的样式位置 import router from './router'