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。想了解这两货的工做机制的，能够到这里看看。

未完待续 ...