vue2.0 慢慢越过坑

在初次用vue2.0的使用遇到好多问题，慢慢爬，分享给你们，说得很差你们勿喷哈！

1，在作项目的时候，每次返回，数据都会从新请求加载。用户体验很是差，数据3秒后才出现，用户体验很是差啊！

<keep-alive>是Vue的内置组件，能在组件切换过程当中将状态保留在内存中，防止重复渲染DOM。
 具体代码：
 <keep-alive>
    <router-view></router-view>  
</keep-alive>  
复制代码

若是过上面方法还不ok？

尝试利用路由的meta属性中 keepAlive=true时页面的状态保存，其余状况下不保存状态。

<keep-alive>  
    <router-view v-if="$route.meta.keepAlive"></router-view>  
</keep-alive>  
<router-view v-if="!$route.meta.keepAlive"></router-view>  
复制代码

而后就是给咱们路由设置keepAlive属性值，好比我是给主页（列表页）的路由设置了keepAlive=true。

export default new Router({
    routes: [
        {
            path: '',
            redirect: '/index'
        },
        {
            path: '/index',
            name: 'index',
            component: Index,
            meta: {  
                title: '首页',  
                keepAlive: true  
            }  
        }
    ]
})
复制代码

vue是单页面，又想弄顶部标题？？

第一种方法： 利用 document.title="首页"，不失为一个方法，确实能够自定义顶部标题，只须要在.vue文件加上这句

可是仍是有缺陷，可是在手机响应不太好。

第二种方法： 1，在router js内自定义meta属性， title: '主页'

meta: {  
        title: '首页'
    }  
复制代码

在main.js内监听路由变化，配合使用：

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  if(to)
  next();
})
复制代码

2，在跳转二级页面时候，监控路由变换，使底部导航不出现 而且 二级页面滚动到顶部

<m-footer v-if="footerShow"></m-footer>

data内footerShow默认为true

    watch:{
        $route(now,old){     //监控路由变换
            if(now.path=="/index"){
                this.footerShow=true;
            } else{
                this.footerShow=false;
            }
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    },
复制代码

3.vue 首屏加载慢，有没啥解决方案？

拆分多个chunk加载，用vue-router中的路由懒加载。最后打包，文件大小也会变小。

参考官网：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
复制代码

4.vue在进入首屏时候，除了加载慢还有一个问题：页面先加载的demo结构，在填充数据，这样体验不是很佳

5.vue样式锁定？

使用scoped，样式锁定，不串乱，模块组件之间样式互相不影响。

<style scoped lang="less">
@import './../common/css/productList.less';
</style>
复制代码

6.vue打包后出现一些map文件，如何去掉？去掉好处做用？

解决办法：src/config/index.js中改一个参数：

productionSourceMap:false 
复制代码

这个改成false后，在最终打包的文件中没有map文件

map文件的做用：简单说就是 解除加密，由于项目打包后，代码都是通过压缩混淆的，这样就不利于调试

生成.map的文件，当你 F12 调试代码时，浏览器会去加载.map文件，若是运行时报错，有了map就像未加密的代码同样，准确的输出是哪行哪列有错误！！

7.项目在PC端微信浏览器打不开，其余都好好的，我就奇了怪，百思不得其解，我一直觉得是es6编译问题，不支持？结果最后不是

若是你也遇到这种打不开？排查插件吧！我就是有关swiper轮播插件问题

怎么解决？ 把swiper版本由4换成3，顿时ok了，可是代码还须要改下，毕竟4与3的api不同

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

    slides(){
        var swiper = new Swiper('.swiper-container', {
            pagination: '.dot',
            paginationClickable: true,
            loop: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            observer: true
        });
    },
    
    最后调用slides方法:  this.slides();
    
    注意：虽然使用的3版本，可是vue内你须要加上bserver: true, 不使用没法监听长度，项目轮播图是从服务器拿的数据。
复制代码

npm安装的默认都是最新版本，swiper4版本在使用过程当中有点问题，loop循环也是，建议仍是使用3，

8. static文件夹放图片，里面的部分图片会被打包成 img文件夹 (dsit/static/img)，以后部分图片路径会失效

config/index.js 中的 assetsPublicPath 为 ./
build/utils.js 中的 ExtractTextPlugin.extract 传入参数 publicPath: '../../'
复制代码

9.设置dev/build的api域名

dev关环境：config/dev.env.js 中的 新增 API:'"http://www.123.232.22：8081"'
build环境：config/prod.env.js 中的 新增 API:'"http://www.baidu.com"'
复制代码

最后在mian.js内新增

axios.defaults.withCredentials = true;
axios.defaults.baseURL = process.env.API;   
复制代码

后续

最后，我在逛博客的时候看到一个有趣的问题：（来源：做者：muwoo）

var vm = new Vue({
    el: '#example',
    data: {
        msg: 'begin',
    },
    mounted () {
      this.msg = 'end'
      console.log('1')
      setTimeout(() => { // macroTask
         console.log('3')
      }, 0)
      Promise.resolve().then(function () { //microTask
        console.log('promise!')
      })
      this.$nextTick(function () {
        console.log('2')
      })
  }
})

执行顺序是什么呢？哈哈
复制代码

这个的执行顺序想必你们都知道前后打印：一、promise、二、3。

由于首先触发了this.msg = 'end'，致使触发了watcher的update，从而将更新操做callback push进入vue的事件队列。

this.$nextTick也为事件队列push进入了新的一个callback函数，他们都是经过setImmediate --> MessageChannel --> Promise --> setTimeout来定义timeFunc。而Promise.resolve().then则是microTask，因此会先去打印promise。

在支持MessageChannel和setImmediate的状况下，他们的执行顺序是优先于setTimeout的（在IE11/Edge中，setImmediate延迟能够在1ms之内，而setTimeout有最低4ms的延迟，因此setImmediate比setTimeout(0)更早执行回调函数。其次由于事件队列里，优先收入callback数组）因此会打印2，接着打印3

可是在不支持MessageChannel和setImmediate的状况下，又会经过Promise定义timeFunc,也是老版本Vue 2.4 以前的版本会优先执行promise。这种状况会致使顺序成为了：一、二、promise、3。由于this.msg一定先会触发dom更新函数，dom更新函数会先被callback收纳进入异步时间队列，其次才定义Promise.resolve().then(function () { console.log('promise!')})这样的microTask，接着定义$nextTick又会被callback收纳。咱们知道队列知足先进先出的原则，因此优先去执行callback收纳的对象。

end