vue单文件组件构建vue项目的若干技巧或建议

Posted 2021-01-01 mr-ccqt

接触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。想了解这两货的工作机制的，可以到这里看看。

未完待续 ...