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 相关文章推荐
js 小数取整的函数
May 10 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 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中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
javascript定时器完整实例
2015/02/10 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python字典序问题实例
2014/09/26 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Django中的Model操作表的实现
2018/07/24 Python
Python中文编码知识点
2019/02/18 Python
Python子类继承父类构造函数详解
2019/02/19 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
物流专业大学生求职信范文
2013/10/28 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
初中政治教师教学反思
2016/02/23 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android