转：Vue keep-alive实践总结

悠悠 2021-12-14 13:27 179阅读 0赞

1 Vue keep-alive实践总结
      2 <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
      3 
      4 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
      5 
      6 prop:
      7 
      8 include: 字符串或正则表达式。只有匹配的组件会被缓存。
      9 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
     10 在2.1.0版本Vue中
     11 
     12 常见用法：
     13 
     14 // 组件
     15 export default {
     16   name: 'test-keep-alive',
     17   data () {
     18     return {
     19         includedComponents: "test-keep-alive"
     20     }
     21   }
     22 }
     23 <keep-alive include="test-keep-alive">
     24   
     25   <component></component>
     26 </keep-alive>
     27 
     28 <keep-alive include="a,b">
     29   
     30   <component :is="view"></component>
     31 </keep-alive>
     32 
     33 
     34 <keep-alive :include="/a|b/">
     35   <component :is="view"></component>
     36 </keep-alive>
     37 
     38 
     39 <keep-alive :include="includedComponents">
     40   <router-view></router-view>
     41 </keep-alive>
     42 
     43 <keep-alive exclude="test-keep-alive">
     44   
     45   <component></component>
     46 </keep-alive>
     47 
     48 结合router，缓存部分页面
     49 
     50 使用$route.meta的keepAlive属性：
     51 
     52 <keep-alive>
     53     <router-view v-if="$route.meta.keepAlive"></router-view>
     54 </keep-alive>
     55 <router-view v-if="!$route.meta.keepAlive"></router-view>
     56 需要在router中设置router的元信息meta：
     57 
     58 //...router.js
     59 export default new Router({
     60   routes: [
     61     {
     62       path: '/',
     63       name: 'Hello',
     64       component: Hello,
     65       meta: {
     66         keepAlive: false // 不需要缓存
     67       }
     68     },
     69     {
     70       path: '/page1',
     71       name: 'Page1',
     72       component: Page1,
     73       meta: {
     74         keepAlive: true // 需要被缓存
     75       }
     76     }
     77   ]
     78 })
     79 使用效果
     80 
     81 以上面router的代码为例：
     82 
     83 
     84 <template>
     85   <div class="hello">
     86     <h1>Vue</h1>
     87     <h2>{
        {msg}}</h2>
     88     <input placeholder="输入框"></input>
     89   </div>
     90 </template>
     91 
     92 <template>
     93   <div class="hello">
     94     <h1>{
        {msg}}</h1>
     95   </div>
     96 </template>
     97 (1) 在Page1页面输入框输入“asd”，然后手动跳转到Hello页面；
     98 
     99 (2) 回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；
    100 
    101 
    102 
    103  图1 进入Page1页面，并输入"asd"
    104 
    105 
    106 
    107  图2 跳转到Hello
    108 
    109 
    110 
    111  图3 返回Page1页面，输入框数据会被保留
    112 
    113 当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，
    114 
    115 借鉴一下 vue-router 之 keep-alive，作者：RoamIn这篇博客中的例子：
    116 
    117 首页是A页面
    118 B页面跳转到A，A页面需要缓存
    119 C页面跳转到A，A页面不需要被缓存
    120 思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：
    121 
    122 A的路由：
    123 
    124 {
    125     path: '/',
    126     name: 'A',
    127     component: A,
    128     meta: {
    129         keepAlive: true // 需要被缓存
    130     }
    131 }
    132 export default {
    133     data() {
    134         return {};
    135     },
    136     methods: {},
    137     beforeRouteLeave(to, from, next) {
    138          // 设置下一个路由的 meta
    139         to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新
    140         next();
    141     }
    142 };
    143 export default {
    144     data() {
    145         return {};
    146     },
    147     methods: {},
    148     beforeRouteLeave(to, from, next) {
    149         // 设置下一个路由的 meta
    150         to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    151         next();
    152     }
    153 };

转载于:https://www.cnblogs.com/xuyx/p/11032088.html