zoukankan      html  css  js  c++  java
  • keep-alive使用笔记

    vue2.0提供了keep-alive组件,用来缓存组件,避免多次加载,减少性能消耗。

    1.将整个网页缓存起来

    <router-view 
        class="view"  
        keep-alive  
        transition  
        transition-mode="out-in">  
      </router-view>

    最常用的方式,用以提高整体的加载速度。

    2.缓存部分组件或页面

    a.使用include与exclude

    <keep-alive include="a,b"> <!--缓存name为a或b的组件-->
      <component :is="view"></component>
    </keep-alive>
    <!-- regex (use v-bind) -->
    <keep-alive :include="/a|b/"> <!--缓存name正则匹配/a|b/的组件-->
     <component :is="view"></component> </keep-alive>

    官网推荐的方法

    b.使用router.mate

    // 这是目前用的比较多的方式
    <keep-alive>
        <router-view v-if="$route.mate.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.mate.keepAlive"></router-view>

    router设置:

    ... 
      routes: [
        { path: '/', redirect: '/index',  component: Index, mate: { keepAlive: true }},
        {
          path: '/common',
          component: TestParent,
          children: [
            { path: '/test2', component: Test2, mate: { keepAlive: true } } 
          ]
        }
        ....
        // 表示index和test2都使用keep-alive

    根据router设置中的mate值来判断是否加载此组件

  • 相关阅读:
    vs2008打包过程图解
    [转载]jQuery UI 使用
    [转载]jquery的extend和fn.extend
    [转载]jQuery.extend 函数详解
    jQuery 数据 DOM 元素 核心 属性
    jQuery 遍历
    [转载]JQuery.closest(),parent(),parents()寻找父节点
    (function($){...})(jQuery)是什么意思
    [转载]css hack
    jQuery ajax
  • 原文地址:https://www.cnblogs.com/yanze/p/7645692.html
Copyright © 2011-2022 走看看