手记

vue的keep-alive讲解

功能简介

keep-alivevue2.0加入的一个特性, 能缓存某个组件,或者某个路由。缓存的好处:

  1. 节省性能消耗,避免一个组件频繁重新渲染,节省开支
  2. 保存用户状态,比如说:我们在填写收货地址的页面,需要跳转到另一个页面通过定位选择地址信息再返回继续填写,这时候需要缓存收货地址页面,避免跳转页面导致用户数据丢失。

基础方法:

缓存组件,被keep-alive只会渲染一次

<keep-alive>
	<component>
	  <!-- 组件将被缓存 -->
	</component>
</keep-alive>

缓存路由,所有在keep-alive标签下的路由都会被缓存 :


进阶用法

有些时候,我们只需要缓存部分页面或者某些组件。

方法一:router.mate

在路由里面配置:

const router = [
		{
			name: 'login',
			path: '/login',
			component: login,
		},
		{
			path: '/createResume',
			name: 'createResume',
			component: createResume,
			meta: {
				isKeepAlive: true
			}
		},
		{
			path: '/test',
			name: 'test',
			component: test,
			meta: {
				isKeepAlive: true
			}
		}
	]

利用路由元数据配置了一个isKeepAlive,来判断是否需要缓存该页面,在应用路由的地方需要做如下改动:

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

这样设置,testcreateResume2个页面就会被缓存,而其他页面就不会被缓存,在跳转的时候会被销毁。

方法二:inlcude/exclude

inlcude包含该组件就缓存,exclude不包含该组件就缓存,二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

<keep-alive :include="/mytable | mybuttom/" :exclude="/myselect/">
  <component :is="componentName"></component>
</keep-alive>

我们看到component是渲染动态组件用的,它渲染的组件跟is后面的组件名称有关系,当componentName变化是,包含在include里面的正则表达式:/mytable | mybuttom/里面的组件会被缓存起来,再次出现时,不会重新created,而不在exclude里面的组件会被缓存。上面的使用方式对于路由来说,也适用。
注意:所有的匹配都是匹配组件的name,没有设置name的组件或者路由则不会被匹配

方法三:动态判断

<keep-alive :include="keepAliveArr">
  <component :is="componentName"></component>
</keep-alive>

我们只需要动态改变keepAliveArr里面的值就能动态设置哪些组件或者路由页面需要缓存了,很灵活。

被缓存组件的钩子函数

我们都知道vue组件的生命周期会触发beforeCreate、created 、beforeMount、 mounted这些钩子函数,但是被缓存的组件或者页面在第一次渲染之后,再次进入不会再触发上面的钩子函数了,而是触发activated钩子函数,可以将逻辑放到这里面去做。

同理:离开缓存组件的时候,beforeDestroy和destroyed并不会触发,可以使用deactivated离开缓存组件的钩子来代替。
更多更细节的讲解可以参考vue的官方文档: 官方文档

1人推荐
随时随地看视频
慕课网APP