墨瞳漫畫 升級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
      })
    ],