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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
微信小程序时间控件picker view使用详解
Dec 28 Javascript
layui按条件隐藏表格列的实例
Sep 19 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验证码生成代码
2015/11/11 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
js继承的实现代码
2010/08/05 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JavaScript中的this机制
2016/01/30 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python文件处理
2016/02/29 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python适配器模式代码实现解析
2019/08/02 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
高中考试作弊检讨书
2014/01/14 职场文书
大学生找工作求职信
2014/07/09 职场文书
授权委托书范文
2014/07/31 职场文书
个人授权委托书样本
2014/09/13 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android