keep-alive

keep-alive的概念

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

作用

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

原理

在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

VNode： 虚拟DOM，其实就是一个JS对象

Props

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

生命钩子函数（如果不使用 keep-alive，生命钩子函数不存在）

activated：
在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用

deactivated：
在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

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

注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用

缓存所有页面

在 App.vue 里面

<template><div id="app"><keep-alive><router-view/></keep-alive></div>
</template><script>
export default {name: 'App'
}
</script>

在 App.vue 里面

<template><div id="app">// 1. 将缓存 name 为 test 的组件<keep-alive include='test'><router-view/></keep-alive>// 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用<keep-alive include='a,b'><router-view/></keep-alive>// 3. 使用正则表达式，需使用 v-bind<keep-alive :include='/a|b/'><router-view/></keep-alive> // 5.动态判断<keep-alive :include='includedComponents'><router-view/></keep-alive>// 5. 将不缓存 name 为 test 的组件<keep-alive exclude='test'><router-view/></keep-alive></div>
</template><script>
export default {name: 'App'
}
</script>

在 router 目录下的 index.js 文件里

import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)Vue.use(Router)export default new Router({mode: 'history',routes: [{path: '/',name: 'home',component: Home,redirect: 'goods',children: [{path: 'goods',name: 'goods',component: Goods,meta: {keepAlive: false // 不需要缓存}},{path: 'ratings',name: 'ratings',component: Ratings,meta: {keepAlive: true  // 需要缓存}},{path: 'seller',name: 'seller',component: Seller,meta: {keepAlive: true  // 需要缓存}}]}]
})

在 App.vue 里面

<template><div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view></div>
</template><script>
export default {name: 'App'
}

keep-alive相关推荐

转载：有关SQL server connection Keep Alive 的FAQ(3)
转载:http://blogs.msdn.com/b/apgcdsd/archive/2012/06/07/sql-server-connection-keep-alive-faq-3.aspx 这个 ...
有关SQL server connection Keep Alive 的FAQ(3)
这个是SQL Server Keep Alive FAQ文章的最后一篇. 问题1:为什么我在客户端设置了KeepAlive值,但是我使用SQL server management studio 测试的 ...
ES-PHP向ES批量添加文档报No alive nodes found in your cluster
ES-PHP向ES批量添加文档报No alive nodes found in your cluster 2016年12月14日 12:31:40 阅读数:2668 参考文章phpcurl 请求Chu ...
(chap2 简单的Http协议) HTTP性能优化之持久连接Keep Alive
1. 持久连接节省流量在一开始的HTTP协议中,每进行一次HTTP 通信就断开一次TCP连接. 在请求一个很多资源的HTML页面的时候,每次连接都会造成无所谓的TCP连接的建立和断开,增加了通信量的 ...
有关SQL server connection Keep Alive 的FAQ(2)
这篇文章再进一步讨论有关Keep Alive的几个问题. 1.Keep Alive机制,是否只和特定的provider有关,比如SQL native client, odbc, oledb, ADO等 ...
论文阅读 | Bringing a Blurry Frame Alive at High Frame-Rate with an Event Camera
前言:这是一篇事件相机面向去糊方向的文章.发表在了CVPR2019 oral,之后也改进出了一篇PAMI.内容主要是对事件相机的成像原理和图片的模糊原理进行建模,整理出公式并给出了优化函数,通过不断调 ...
ES-PHP 聚合查询时 No alive nodes found in your cluster
文章目录场景过程解决场景一个聚合查询,时间范围短时,正常响应; 时间范围长时,异常:查看日志 No alive nodes found in your cluster 线下环境限于数据量的问 ...
keep alive是什么？
当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.k ...
【网络协议】TCP和HTTP中keep alive机制
简介:TCP协议和HTTP协议中,都有keepalive机制,只是二者的含义有所不同.TCP中keepalive主要用来进行链路检测:HTTP中keepalive主要用来进行链路复用.其中http1. ...
Number of alive brokers ‘0’ does not meet the required replication factor ‘3’ for the offsets topic
今天kafka积压监控突然为0 一开始以为消费组厉害,但是一上午都是0..... 感觉不对劲,去kafka执行结果报错协调器不可用! the coordinator is not acailab ...

keep-alive

keep-alive的概念

作用

原理

Props

生命钩子函数（如果不使用 keep-alive，生命钩子函数不存在）

缓存所有页面

keep-alive相关推荐

最新文章

热门文章