vue keep-alive保存状态

标签: vue vux keep-alive vue保存状态 vue缓存
17人阅读 评论(0) 收藏 举报
分类:

使用vue的keep-alive属性设置页面保存状态

应项目需求,开发一个类似app的移动端H5项目,有tabbar标签切换,并需要保存当前状态。之前对vue学习不够全面,并不了解keep-alive属性,再查询各种资料,终于看到了keep-alive,简单好用,不禁感叹vue真是强大。

keep-alive定义

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

原理

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

prop

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

常见用法

  • 用法——组件
// 组件
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
    结合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 // 需要被缓存
      }
    }
  ]
})

效果

如图:这个是vux 插件,效果正是如此,状态保留在内存中,防止重复渲染。
那么问题来了,使用keep-alive缓存也会有弊端,会导致有些页面有些数据改变的时候,页面数据需要重新渲染,这时候可以配合watch 监听来解决。

这里写图片描述
这里写图片描述

查看评论

Keepalive

1 What is Keepalived ? Keepalived is a routing software written in C. The main goal of this proje...
  • u011956172
  • u011956172
  • 2016-12-23 19:01:25
  • 550

负载均衡详解

面对大量用户访问、高并发请求,海量数据,可以使用高性能的服务器、大型数据库,存储设备,高性能Web服务器,采用高效率的编程语言比如(Go,Scala)等,当单机容量达到极限时,我们需要考虑业务拆分和分...
  • zhangbijun1230
  • zhangbijun1230
  • 2018-03-04 22:51:17
  • 41

vue keep-alive 数据更新问题

在项目中使用keep-alive>包含router-view>实现页面缓存,加速页面加载, 同时,这种方式带来一些弊端,请看如下大神解释: ****************************...
  • fengjingyu168
  • fengjingyu168
  • 2017-06-20 15:20:57
  • 3078

vue中 keep-alive 的使用

vue中 keep-alive 的使用 问题描述 在业务开发中,会有路由跳转但是返回需要保留数据的场景;vue 中提供了 keep-alive 来处理 解决方案 返回dom不让...
  • yang450712123
  • yang450712123
  • 2018-02-02 10:04:28
  • 188

okHttp系列(二):高级功能:下载,上传以及拦截器

1.下载文件 在ResponseBody中有如下接口: byte() string() bytesStream() charStream() 其中byte()和string...
  • jxf_access
  • jxf_access
  • 2018-02-07 15:55:39
  • 94

tcp链接的几种状态

tcp链接的几种状态 说明: 通常情况下:一个正常的TCP连接,都会有三个阶段:1、TCP三次握手;2、数据传送;3、TCP四次挥手 里面的几个概念: SYN: (同步序列编号,Sy...
  • gzyx541900780
  • gzyx541900780
  • 2016-10-01 22:26:42
  • 1037

vue,keep-alive的作用

项目中写vue也没注意到这个组件,最近在深入的研究vue组件的生命周期函数,每一个函数都是干嘛的,然后其中有activated和deactivated这两个函数与这个组件有关 activated...
  • sinat_17775997
  • sinat_17775997
  • 2017-12-13 10:43:36
  • 703

vue keep-alive的简单使用

缓存组件(全部缓存) 来到的你app.vue keep-alive> router-view> router-view> keep-alive> 如果你想选择性...
  • echo_Ae
  • echo_Ae
  • 2017-11-03 10:06:48
  • 417

消息推送

消息推送最简单的方法就是使用第三方的,比如现在使用比较多的是小米推送、极光推送,消息推送的技术原理是:移动无线网络长连接移动互联网络的现状因为手机平台本身、电量、网络流量的限制,移动互联网应用在设计上...
  • axi295309066
  • axi295309066
  • 2016-11-16 00:16:01
  • 853

HTTP长连接与短链接以及推送技术原理

HTTP长连接和短连接以及推送服务原理 HTTP长连接和短连接1 1. HTTP协议与TCP/IP协议的关系 HTTP的长连接和短连接本质上是TCP长连接和短连接。HTTP属于应用层协议,在传输...
  • fk5431
  • fk5431
  • 2017-04-05 16:55:40
  • 662
    个人资料
    持之以恒
    等级:
    访问量: 6987
    积分: 335
    排名: 23万+
    最新评论