zoukankan      html  css  js  c++  java
  • vue2.0 keep-alive最佳实践

      转自:https://segmentfault.com/a/1190000008123035

    1.基本用法

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

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

    有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
    在使用keep-alive的情况下

    <keep-alive><router-view></router-view></keep-alive>

    将首次触发请求写在created钩子函数中,就能实现缓存,
    比如列表页,去了详情页 回来,还是在原来的页面

    2.缓存部分页面或者组件

    (1)使用router. meta属性

    // 这是目前用的比较多的方式

    <keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>

    router设置

    ... 
    routes: [
    { path: '/', redirect: '/index', component: Index, meta: { keepAlive: true }},
    {
    path: '/common',
    component: TestParent,
    children: [
    { path: '/test2', component: Test2, meta: { keepAlive: true } } 
    ]
    }
    ....

    // 表示index和test2都使用keep-alive
    (2).使用新增属性inlcude/exclude

    2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件

    <!-- comma-delimited string -->
    <keep-alive include="a,b">
    <component :is="view"></component>
    </keep-alive>
    <!-- regex (use v-bind) -->
    <keep-alive :include="/a|b/">
    <component :is="view"></component>
    </keep-alive>

    //其中a,b是组件的name
    注意:这种方法都是预先知道组件的名称的

    (3)动态判断

    <keep-alive :include="includedComponents">
    <router-view></router-view>
    </keep-alive>
    includedComponents动态设置即可
  • 相关阅读:
    A1066 Root of AVL Tree (25 分)
    A1099 Build A Binary Search Tree (30 分)
    A1043 Is It a Binary Search Tree (25 分) ——PA, 24/25, 先记录思路
    A1079; A1090; A1004:一般树遍历
    A1053 Path of Equal Weight (30 分)
    A1086 Tree Traversals Again (25 分)
    A1020 Tree Traversals (25 分)
    A1091 Acute Stroke (30 分)
    A1103 Integer Factorization (30 分)
    A1032 Sharing (25 分)
  • 原文地址:https://www.cnblogs.com/EnSnail/p/7124512.html
Copyright © 2011-2022 走看看