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

接觸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。想了解這兩貨的工做機制的，能夠到這裏看看。

未完待續 ...