墨瞳漫画 升级vue2 踩坑

概述

升级的话呢，仍是比较简单，就按官方文档来，改写一下某些api，本文主要讲文档中说的不清晰的一些坑

vue-router

官方文档中推荐使用watcher来监测$route的改变，当路由变化时就去服务端获取数据，这样直接监测是不对的，仍是要把路由变化和获取数据两个分开来，上一篇文章中，在vue1里，我是在组件中储存了路由参数，使用router的data钩子函数来获取路由改变，并改变到组件变量中，再由一个watcher来监测组件变量的变化，这样主要是为了利用缓存，只在路由参数改变的时候，再去获取数据。而在vue2中，若直接监测$route，则每次进入当前路由，都会从新调用获取数据的函数，更可怕的是，当离开这个页面的时候，也是触发了$route的改变，很可怕了，会再请求一次数据，而且带来一些意外的bug，因此仍是要按照之前的思想，只不过vue2种route的钩子函数都去掉了，因此要用组件的生命周期钩子函数activated，正确的姿式：

activated: function(){
      this.bookId = this.$route.params.id;
  },
watch: {
  'bookId' : function(val){
    //do something
  }
}

多个路由参数，把路由参数放在一个对象里，使用深监测

activated: function(){
      this.watcher.type = this.$route.params.type;
      this.watcher.id = this.$route.query.id;
  },
watch : {
  'watcher' : {
    handler: function(val){
    //do something
    window.scrollTo(0,0);// 不使用缓存时，不使用记录好的用户位置，滑倒顶部
    },
    deep: true
  }
}

好，下面是一个bug，vue-router2仍然使用html5 history来记录浏览位置，可是比上次高级了不少，在history的state对象里，储存了一个key，在sesstionStorage里，用这个key作键名，浏览位置的坐标做为键值储存了浏览位置。可是，第一个页面的位置是没有记住的，进入第一个路由的时候，并无pushState（看不懂的话麻烦自查一下history的api），因此第一个路由的key没有记录在history中，要简单的fix一下

window.addEventListener("popstate",function(e){
     if(!e.state){ //第一个路由的histroy里state应该是null
       if(window.sessionStorage.length > 0){ 
         let key = Object.keys(window.sessionStorage)[0] //第一个路由的key在第一个，获取到
         history.replaceState({key: key}, '', window.firstPath) //用replaceState强行把这个key注入到第一个路由中，firstPath是第一个路由的path，本身想办法拿到吧
         let yPosition = JSON.parse(window.sessionStorage.getItem(key)).y; //获取到滚动位置
         window.scrollTo(0, yPosition); 
       }
     }
   },false);

这个bug搞了我很长时间，也不知道怎么调试，只能去看源码了，发现居然看的懂源码！最后仍是fix了，很开心。（不过，不知道是否是我使用router的姿式不对，网上可供查阅的东西太少了）

vue-cli

嗯，必定要从新用新版本的vue-cli从新构建下项目，由于有不少版本不同的模块，要否则会有些小bug（我已经忘了。）
vue-cli直接构建的项目是没有开启postcss 加css3兼容性前缀的，改一下webpack.base.conf.js

postcss: [
      require('autoprefixer')({
        browsers: ['last 7 versions'] //这里这个数字原本是3，改为7
      })
    ],