之前使用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'
