来自 软件资讯 2019-10-04 13:45 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

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

接触vue一年了,由于早前都以碎片化的学习与练习,缺乏深切的掌握与计算,所以倍感收效甚微。近日选拔空闲时光撸了二个基于vue全家桶的气候应用webapp并做一些档期的顺序总计,以加强团结所学,加深对vue的领悟。

正文基于 Vue2.0

前面一个框架的选拔

在web移动端应用快捷崛起的今日,webapp,hybird app挤压古板原生app的样子进一步分明,产品的神速更新迭代、跨平台适配,催生了尤其多琳琅满指标前端框架。为了酬答五颜六色的制品供给,适应急忙高效的开拓工作,大家也必需跟上步履,所以领悟一门还是多门前端框架显得特别重大。

vue作为一款渐进式的MVVM前端框架,在构建高复用性组件方面具有一点都十分的大的优势。其.vue单文件结构与数据驱动视图的思考,为开支复杂的单页应用程序提供壮大支持。

keep-alive 简介

keep-alive 是 Vue 内置的二个零部件,可以使被含有的机件保留状态,或制止重复渲染。
用法也很简单:

<keep-alive>
  <component>
    <!-- 该组件将被缓存! -->
  </component>
</keep-alive>

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的牵线,网络的资料相当多,可以活动摆渡或哭够~~

props

  • include - 字符串或正则表明,独有相称的组件会被缓存
  • exclude - 字符串或正则说明式,任何匹配的零部件都不会被缓存
// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存! -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存! -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

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>

但奇迹大家想要的是采用在腾飞的时候缓存,后退的时候不缓存,大概是从某些路由跳转访谈时不缓存,这一年路由导航守卫就起到了效果。

图片 1

如上航海用体育场合,在manage.vue文件中,大家供给点击增多的都市后跳转回首页,并滚动到新扩展的城市页。根据keepAlive的属性,此时会回去到 '/home' 的缓存页面,即会回到首页的卡拉奇页,很理解那不切合业务需要。接下来,大家在search.vue组件内,加多三个组件内的领航守卫:

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

那样一来,在'/search'页面点击新扩充的都会跳转到'/home'页从前,导航守卫动态的将路由'/home'的keep阿里ve属性关闭,以此到达更新'/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-router

太湖雨好大,借把伞躲躲雨...
router-view 也是多少个零件,借使平素被包在 keep-alive 里面,全体路径相配到的视图组件都会被缓存:

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存! -->
    </router-view>
</keep-alive>

只是产品汪总是要改须要,拦都拦不住...

问题

若是只想 router-view 里面某些组件被缓存,如何做?

  • 使用 include/exclude
  • 增加 router.meta 属性

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:vue单文件组件构建vue项目的若干技巧或建议

关键词: