转：Vue keep-alive实践总结

  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   <!-- 将缓存name为test-keep-alive的组件 -->
 25   <component></component>
 26 </keep-alive>
 27 
 28 <keep-alive include="a,b">
 29   <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
 30   <component :is="view"></component>
 31 </keep-alive>
 32 
 33 <!-- 使用正则表达式，需使用v-bind -->
 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   <!-- 将不缓存name为test-keep-alive的组件 -->
 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 <!-- Page1页面 -->
 84 <template>
 85   <div class="hello">
 86     <h1>Vue</h1>
 87     <h2>{{msg}}</h2>
 88     <input placeholder="输入框"></input>
 89   </div>
 90 </template>
 91 <!-- Hello页面 -->
 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 };