接觸vue一年了，由於早前都是碎片化的學習與練習，缺乏深入的理解與總結，所以感覺收效甚微。最近利用閑暇時間擼了一個基於vue全家桶的天氣應用webapp並做一些項目總結，以鞏固自己所學，加深對vue的理解。

前端框架的選擇

在web移動端應用快速崛起的今天，webapp，hybird app擠壓傳統原生app的趨勢越發明顯，產品的快速更新叠代、跨平臺適配，催生了越來越多五花八門的前端框架。為了應對各式各樣的產品需求，適應快速高效的開發工作，我們也必須跟上步伐，所以掌握一門甚至多門前端框架顯得尤為重要。

vue作為一款漸進式的MVVM前端框架，在構建高復用性組件方面具有非常大的優勢。其.vue單文件結構與數據驅動視圖的思想，為開發復雜的單頁應用程序提供有力支持。

webapp尺寸解決方案

但凡涉及移動端，都不得不考慮適配的問題。然而webapp本就是為解決跨平臺跨終端而誕生，所以我們不可能為同一個應用去開發多個適配版本。相信很多人以前在做自適應網頁的時候，沒少用過像bootstrap這樣帶有網格系統的框架，或是利用css的媒體查詢。然而這樣做未免太過麻煩。今天要介紹的是webapp尺寸的rem解決方案。

(function(doc, win) {
    let docm = doc.documentElement,
        //orientationchange為移動終端橫屏事件
        resizeEvent = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
        handleResize = function() {
            let clientWidth = docm.clientWidth;
            //假設以iphone6（375x667）為設計稿，則此時為 1rem = 10px;
            docm.style.fontSize = clientWidth / 37.5 + ‘px‘;
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, handleResize, false);
    doc.addEventListener(‘DOMContentLoaded‘, handleResize, false);
})(document, window);
 

關於rem的介紹，網上的資料很多，可以自行擺渡或哭夠~~

keepAlive組件結合導航守衛應對特殊情景

官方文檔中對keepAlive的使用說明很詳細，這裏這主要想講一下本人在使用的過程中遇到的一些問題及解決辦法。

我們都知道，在vue-router路由配置中，配置了某個route的meta屬性的keepAlive鍵值為true,然後在路由視圖將元屬性keepAlive為true的路由包含在keep-alive標簽內，則該路由在第一次訪問後很被緩存，直到會話結束才刪除。

//router配置部分
export default [{
  path: ‘/‘,
  component: App,
  children: [{
    path: ‘‘,
    redirect: ‘/home‘
  }, {
    path: ‘/home‘,
    component: home,
    meta: {
      keepAlive: true
    }
  }]
}]
 

//app.vue部分
<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

但有時候我們想要的是應用在前進的時候緩存，後退的時候不緩存，或者是從某個路由跳轉訪問時不緩存，這個時候路由導航守衛就起到了作用。

如上圖，在manage.vue文件中，我們要求點擊添加的城市後跳轉回首頁，並滾動到新增的城市頁。按照keepAlive的屬性，此時會返回到 ‘/home‘ 的緩存頁面，即會回到首頁的深圳頁，很明顯這不符合業務要求。接下來，我們在search.vue組件內，添加一個組件內的導航守衛：

beforeRouteLeave(to, from, next){
    if(to.path == "/home"){
        to.meta.keepAlive = false;
    }
    next()
}

這樣一來，在‘/search‘頁面點擊新增的城市跳轉到‘/home‘頁之前，導航守衛動態的將路由‘/home‘的keepAlive屬性關閉，以此達到更新‘/home‘頁DOM的目的。接著我們在home.vue組件中將keepAlive屬性設為true即可。

beforeRouteLeave(to,from,next){
    if(!this.$route.meta.keepAlive){
        this.RECORD_POSITION_Y(this.dist);
        this.$route.meta.keepAlive = true;
    }
    next();
}

keepAlive緩存的路由組件，除了能利用上述所說的導航守衛來實現更新組件，也可以利用keep-alive 組件特別的兩個生命周期鉤子：activated與deactivated。想了解這兩貨的工作機制的，可以到這裏看看。

未完待續 ...

vue單文件組件構建vue項目的若幹技巧或建議