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

7. 线上已验证过，移动端兼容的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'