vue2.0 慢慢越過坑

在初次用vue2.0的使用遇到好多問題，慢慢爬，分享給你們，說得很差你們勿噴哈！css

1，在作項目的時候，每次返回，數據都會從新請求加載。用戶體驗很是差，數據3秒後纔出現，用戶體驗很是差啊！html

<keep-alive>是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。
 具體代碼：
 <keep-alive>
    <router-view></router-view>  
</keep-alive>  
複製代碼

若是過上面方法還不ok？vue

嘗試利用路由的meta屬性中 keepAlive=true時頁面的狀態保存，其餘狀況下不保存狀態。ios

<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。es6

export default new Router({
    routes: [
        {
            path: '',
            redirect: '/index'
        },
        {
            path: '/index',
            name: 'index',
            component: Index,
            meta: {  
                title: '首頁',  
                keepAlive: true  
            }  
        }
    ]
})
複製代碼

vue是單頁面，又想弄頂部標題？？vue-router

第一種方法：利用 document.title="首頁"，不失爲一個方法，確實能夠自定義頂部標題，只須要在.vue文件加上這句npm

可是仍是有缺陷，可是在手機響應不太好。axios

第二種方法： 1，在router js內自定義meta屬性， title: '主頁'api

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