Vue keep-alive Vue keep-alive实践总结（推荐）

时间:2021-03-29 HanYif 人气:0

想了解Vue keep-alive实践总结（推荐）的相关内容吗，HanYif在本文为您仔细讲解Vue keep-alive的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue,keep,alive，下面大家一起来学习吧。

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive>https://m.qb5200.com/包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和https://m.qb5200.com/<transition>https://m.qb5200.com/相似，<keep-alive>https://m.qb5200.com/是一个抽象组件：它自身不会渲染一个https://m.qb5200.com/DOMhttps://m.qb5200.com/元素，也不会出现在父组件链中。

prop:

include:https://m.qb5200.com/字符串或正则表达式。只有匹配的组件会被缓存。
exclude:https://m.qb5200.com/字符串或正则表达式。任何匹配的组件都不会被缓存。

在2.1.0版本Vue中

常见用法：

//https://m.qb5200.com/组件 exporthttps://m.qb5200.com/defaulthttps://m.qb5200.com/{ https://m.qb5200.com/name:https://m.qb5200.com/'test-keep-alive', https://m.qb5200.com/datahttps://m.qb5200.com/()https://m.qb5200.com/{ https://m.qb5200.com/returnhttps://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/includedComponents:https://m.qb5200.com/"test-keep-alive" https://m.qb5200.com/} https://m.qb5200.com/} }

<keep-alivehttps://m.qb5200.com/include="test-keep-alive"> https://m.qb5200.com/ https://m.qb5200.com/<component></component> </keep-alive> <keep-alivehttps://m.qb5200.com/include="a,b"> https://m.qb5200.com/ https://m.qb5200.com/<componenthttps://m.qb5200.com/:is="view"></component> </keep-alive>  <keep-alivehttps://m.qb5200.com/:include="/a|b/"> https://m.qb5200.com/<componenthttps://m.qb5200.com/:is="view"></component> </keep-alive>  <keep-alivehttps://m.qb5200.com/:include="includedComponents"> https://m.qb5200.com/<router-view></router-view> </keep-alive> <keep-alivehttps://m.qb5200.com/exclude="test-keep-alive"> https://m.qb5200.com/ https://m.qb5200.com/<component></component> </keep-alive>

结合router，缓存部分页面

使用$route.meta的keepAlive属性：

<keep-alive> https://m.qb5200.com/<router-viewhttps://m.qb5200.com/v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-viewhttps://m.qb5200.com/v-if="!$route.meta.keepAlive"></router-view>

需要在router中设置router的元信息meta：

//...router.js exporthttps://m.qb5200.com/defaulthttps://m.qb5200.com/newhttps://m.qb5200.com/Router({ https://m.qb5200.com/routes:https://m.qb5200.com/[ https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/path:https://m.qb5200.com/'/', https://m.qb5200.com/https://m.qb5200.com/name:https://m.qb5200.com/'Hello', https://m.qb5200.com/https://m.qb5200.com/component:https://m.qb5200.com/Hello, https://m.qb5200.com/https://m.qb5200.com/meta:https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/falsehttps://m.qb5200.com///https://m.qb5200.com/不需要缓存 https://m.qb5200.com/https://m.qb5200.com/} https://m.qb5200.com/}, https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/path:https://m.qb5200.com/'/page1', https://m.qb5200.com/https://m.qb5200.com/name:https://m.qb5200.com/'Page1', https://m.qb5200.com/https://m.qb5200.com/component:https://m.qb5200.com/Page1, https://m.qb5200.com/https://m.qb5200.com/meta:https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/truehttps://m.qb5200.com///https://m.qb5200.com/需要被缓存 https://m.qb5200.com/https://m.qb5200.com/} https://m.qb5200.com/} https://m.qb5200.com/] })

使用效果

以上面router的代码为例：

<template> https://m.qb5200.com/<divhttps://m.qb5200.com/class="hello"> https://m.qb5200.com/<h1>Vue</h1> https://m.qb5200.com/<h2>{{msg}}</h2> https://m.qb5200.com/<inputhttps://m.qb5200.com/placeholder="输入框"></input> https://m.qb5200.com/</div> </template>  <template> https://m.qb5200.com/<divhttps://m.qb5200.com/class="hello"> https://m.qb5200.com/<h1>{{msg}}</h1> https://m.qb5200.com/</div> </template>

(1)https://m.qb5200.com/在Page1页面输入框输入“asd”，然后手动跳转到Hello页面；

(2)https://m.qb5200.com/回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；

https://m.qb5200.com/图1https://m.qb5200.com/进入Page1页面，并输入"asd"

https://m.qb5200.com/图2https://m.qb5200.com/跳转到Hello

https://m.qb5200.com/图3https://m.qb5200.com/返回Page1页面，输入框数据会被保留

当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，

借鉴一下vue-routerhttps://m.qb5200.com/之https://m.qb5200.com/keep-alive这篇博客中的例子：

首页是A页面
B页面跳转到A，A页面需要缓存
C页面跳转到A，A页面不需要被缓存

思路是在每个路由的beforeRouteLeave(to,https://m.qb5200.com/from,https://m.qb5200.com/next)钩子中设置to.meta.keepAlive：

A的路由：

{ https://m.qb5200.com/path:https://m.qb5200.com/'/', https://m.qb5200.com/name:https://m.qb5200.com/'A', https://m.qb5200.com/component:https://m.qb5200.com/A, https://m.qb5200.com/meta:https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/truehttps://m.qb5200.com///https://m.qb5200.com/需要被缓存 https://m.qb5200.com/} } exporthttps://m.qb5200.com/defaulthttps://m.qb5200.com/{ https://m.qb5200.com/data()https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/returnhttps://m.qb5200.com/{}; https://m.qb5200.com/}, https://m.qb5200.com/methods:https://m.qb5200.com/{}, https://m.qb5200.com/beforeRouteLeave(to,https://m.qb5200.com/from,https://m.qb5200.com/next)https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/https://m.qb5200.com///https://m.qb5200.com/设置下一个路由的https://m.qb5200.com/meta https://m.qb5200.com/https://m.qb5200.com/to.meta.keepAlivehttps://m.qb5200.com/=https://m.qb5200.com/true;https://m.qb5200.com///https://m.qb5200.com/Bhttps://m.qb5200.com/跳转到https://m.qb5200.com/Ahttps://m.qb5200.com/时，让https://m.qb5200.com/Ahttps://m.qb5200.com/缓存，即不刷新 https://m.qb5200.com/https://m.qb5200.com/next(); https://m.qb5200.com/} }; exporthttps://m.qb5200.com/defaulthttps://m.qb5200.com/{ https://m.qb5200.com/data()https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/returnhttps://m.qb5200.com/{}; https://m.qb5200.com/}, https://m.qb5200.com/methods:https://m.qb5200.com/{}, https://m.qb5200.com/beforeRouteLeave(to,https://m.qb5200.com/from,https://m.qb5200.com/next)https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com///https://m.qb5200.com/设置下一个路由的https://m.qb5200.com/meta https://m.qb5200.com/https://m.qb5200.com/to.meta.keepAlivehttps://m.qb5200.com/=https://m.qb5200.com/false;https://m.qb5200.com///https://m.qb5200.com/Chttps://m.qb5200.com/跳转到https://m.qb5200.com/Ahttps://m.qb5200.com/时让https://m.qb5200.com/Ahttps://m.qb5200.com/不缓存，即刷新 https://m.qb5200.com/https://m.qb5200.com/next(); https://m.qb5200.com/} };

亲测有效哦~

keep-alive生命周期钩子函数：activated、deactivated

使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

加载全部内容