以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的）
keep-alive属性：include - 字符串或正则表达式。只有匹配的组件会被缓存。exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
用法：
缓存动态组件：
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们（此种方式并无太大的实用意义）。
<!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive> <!-- 多个条件判断的子组件 --> <keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive>缓存路由组件：
使用keep-alive可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件，keep-alive大多数使用场景就是这种。
方式一：vue文件中 <keep-alive> <router-view></router-view> </keep-alive> 方式二：router.js中 { path: '/as', icon: 'earth', title: '赠品管理', name: 'as', component: Main, children: [{ path: 'a', title: '赠品管理', name: 'a', component: () => import ('@/views/a/index.vue'), meta:{ keepAlive:true } }] }缓存你想要缓存的：
使用v-if通过路由元信息判断缓存哪些路由
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!--这里是会被缓存的路由--> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口--> </router-view> //router配置 new Router({ routes: [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被缓存 } }, { path: '/edit', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被缓存 } } ] });生命周期钩子：
在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated
activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用
deactivated：组件被停用(离开路由)时调用
注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。
我不想把查询条件和查询结果被缓存，那么我可以这样写：
mounted: function() { this.loaddata(1) }, activated: function () { this.productclass.name=""//查询条件 this.loaddata(1) //查询结果的方法 }新增属性： include：匹配的 路由/组件 会被缓存 exclude：匹配的 路由/组件 不会被缓存 include和exclude支持三种方式来有条件的缓存路由：采用逗号分隔的字符串形式，正则形式，数组形式。 正则和数组形式，必须采用v-bind形式来使用。
缓存组件的使用方式：
<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 数组 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>但更多场景中，我们会使用keep-alive来缓存路由：
<keep-alive include='a'> <router-view></router-view> </keep-alive>注：当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。
