最近做的專案快要結尾了，本專案用前後端分離的，然後前端是用vue開發的，為什麼選vue呢？一來公司要求效率要高些的，那就應該用到三大流行的框架之一，然後專案的內容不太複雜的，覺得用vue更合適的。二來正好應該要“炒熟”vue了哈。其中陷入了不少坑，一個一個爬過來的，總結下入坑的原因，另外會給出官方文件的對應內容，以便加深理解的。如有不足之處，請提出來哈～

非同步載入元件

const Index=()=>import('@/page/Index');const Home=()=>import('@/page/Home');const router=new Router({    routes:[
    {        path:'/index',        component:Index
    },
    {        path:'/home',        component:Home
    }
    ]
})

然後你會發現js被分開的，這就是所謂的非同步載入～

參考官方文件

我們都知道vue一般都是單頁面的，也就意味著一開始就要載入全部的元件，這太不友好的，載入時間會慢些。這時候我們就用到非同步元件～

頁面後退時，保持之前的狀態，不重新整理

const router = new Router({
  routes: [
    {
      path: '/index',
      components:Index,
      meta:{
        keepAlive:false
      }
    },
    {
        path:'/goods',
        component:Goods,
        meta:{
          keepAlive:true
        }
    },
}

用meta中的keepAlive來判斷需不需要快取,keep-alive就是儲存快取的元件。

參考官方文件

在router.js中

在app.vue檔案中

在相同路由的情況下，再次點選導航欄上的本路由，再次重新整理

在vue中，路由地址相同的情況下，是不會再次重新整理的，即使點選本路由的導航文字上。一開始我沒想到解決的方案，後來尋求大佬商量，大佬說可以用事件傳遞的。然後他告訴我一句話的，

vue.js一定不會阻礙傳統方法實現的。

這話說得我慚愧，我意識到我太依賴vue.js的框架，沒擴充思維的。再次感謝大佬的點拔～
```
//datadata(){    return {
        isFresh:false,
    }
}//事件函式tempbtn(){    this.isFresh=false;
}
```
```
watch:{
    isFresh(){        //console.log('ShopisFresh:'+this.isFresh);
        if(this.isFresh){            Object.assign(this.$data,this.$options.data());            this.fetchData();
        }
    }
},//然後載入完後，還要繫結事件，傳遞到主路由的tempbtn事件this.$emit('tempbtn');
```
嗯，在子路由上監聽到isFresh為true，表示要重新整理的，Object.assign是利用data的初始化資料覆蓋，然後重新載入資料。

Index.vue

對，是可以用事件傳遞來實現的。在主路由上繫結isFresh，判斷需不需要重新整理子路由，然後在子路由上繫結事件，傳遞到主路由的事件。主路由監聽到事件的，就把isFresh變為false，以防下面還會需要到。不設定為false,下面的就不會重新整理。看程式碼如下：
App.vue

checkbox整體點選

師要求能點選checkbox的整體，包括checkbox後面的文字，不是隻能點選checkbox的框，這可把我為難了，然後艱難的爬出坑了。


    
    點我呀    data(){        return {
            tempChecked:null
        }
    },
    props:['checked'],
    watch:{        checked(){
            this.tmpChecked=this.checked
        }
    },
    computed: {
        selfChecked: {
            get: function(val){                return this.tmpChecked;
            },            set: function(newVal){
                this.tmpChecked = newVal
                this.$emit('input', newVal)
            }
        }
    },

然後在父元件上用v-model即可。用selfChecked來判斷是不是要點選，至於為什麼要watch，是判斷checked為真還是假，比如說在父元件上，提交後，表單要清空的，這時候要監聽到checked為假的，然後傳遞到selfChecked的值。這樣就能清空checkbox。

參考思路

setInterval的問題

用了setInterval之後，切換路由的時候發現還在計時，不得了，真的會影響效能唉，就嚇的趕緊啃官方文件，找到了～
```
beforeDestroy(){
    clearInterval(this.interId);
}
```
beforeDestroy是毀路由之前的函式，就是說毀路由之前就清除setInterval

參考vue的生命週期

在v-for迴圈中進行v-model資料繫結
```
    
```

下面說說和vue沒關係的問題

上線時去掉console

我們一般都會用console來列印，以便檢查的，萬一console寫多了，上線時總不能列印出console吧，要註釋掉，但太費時間吧，這時候webpack神器上場（本人用webpack3）
```
new UglifyJsPlugin({  uglifyOptions: {
    compress: {
      warnings: false,
      drop_debugger: true,
      drop_console: true
    }
  },  sourceMap: config.build.productionSourceMap,  parallel: true}),
```
這prod是生產環境的，然後drop_console為true，是去掉console

在webpack.prod.config.js中

相容ie的問題

部署到生產環境後，測試ie11時發現空白屏的，我慌了，不是說可以相容到ie9嗎？還是說沒配置好的，然後google查，ie還沒支援js新的api，比如promise，所以需要babel-polyfill來轉換的。真是蛋疼的ie，還能怎麼辦呢？當然是加babel-polyfill外掛的。
```
npm install babel-polyfill --save//然後在webpack.base.config.js中引用這外掛module.exports=require('babel-polyfill');module.export={
    ...
    entry:{
        app:['babel-polyfill','./src/main.js']
    }
}
```

正在更新中...

作者：Empty莫曉邪
連結：

vue專案技術小記

相關文章