Vue keep-alive实践总结(推荐)


Posted in Javascript onAugust 31, 2017

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

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

prop:

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

在2.1.0版本Vue中

常见用法:

// 组件
export default {
 name: 'test-keep-alive',
 data () {
 return {
  includedComponents: "test-keep-alive"
 }
 }
}
<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件,结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式,需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
 <!-- 将不缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

结合router,缓存部分页面

使用$route.meta的keepAlive属性:

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

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

//...router.js
export default new Router({
 routes: [
 {
  path: '/',
  name: 'Hello',
  component: Hello,
  meta: {
  keepAlive: false // 不需要缓存
  }
 },
 {
  path: '/page1',
  name: 'Page1',
  component: Page1,
  meta: {
  keepAlive: true // 需要被缓存
  }
 }
 ]
})

使用效果

以上面router的代码为例:

<!-- Page1页面 -->
<template>
 <div class="hello">
 <h1>Vue</h1>
 <h2>{{msg}}</h2>
 <input placeholder="输入框"></input>
 </div>
</template>

<!-- Hello页面 -->
<template>
 <div class="hello">
 <h1>{{msg}}</h1>
 </div>
</template>

(1) 在Page1页面输入框输入“asd”,然后手动跳转到Hello页面;

(2) 回到Page1页面发现之前输入的"asd"依然保留,说明页面信息成功保存在内存中;

Vue keep-alive实践总结(推荐)

​ 图1 进入Page1页面,并输入"asd"

Vue keep-alive实践总结(推荐)

​ 图2 跳转到Hello

Vue keep-alive实践总结(推荐)

​ 图3 返回Page1页面,输入框数据会被保留

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

借鉴一下vue-router 之 keep-alive这篇博客中的例子:

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

思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive

A的路由:

{
 path: '/',
 name: 'A',
 component: A,
 meta: {
  keepAlive: true // 需要被缓存
 }
}
export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
   // 设置下一个路由的 meta
  to.meta.keepAlive = true; // B 跳转到 A 时,让 A 缓存,即不刷新
  next();
 }
};
export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
  to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存,即刷新
  next();
 }
};

亲测有效哦~

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
深入理解vue-router之keep-alive
Aug 31 #Javascript
vue-router 导航钩子的具体使用方法
Aug 31 #Javascript
浅谈express 中间件机制及实现原理
Aug 31 #Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 #Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 #Javascript
Angular2 http jsonp的实例详解
Aug 31 #Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 #Javascript
You might like
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
24式加速你的Python(小结)
2019/06/13 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
军训心得体会
2013/12/31 职场文书
食堂个人先进事迹
2014/01/22 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
奖学金个人总结
2015/03/04 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL