阅读 84

手牵手一起学习keep-alive

在我们的平时开发工作中,有些组件不需要多次渲染,需要将组件在内存中进行“持久化”。<keep-alive> 是一个抽象组件,在包裹组件时会缓存组件实例,而不是销毁它们。它是个抽象组件,自身不会渲染一个DOM元素,也不会出现在父组件链中。

举个例子?不存在的。。我是不会举例子的

使用方法

activated 和 deactivated

组件一旦被 <keep-alive> 缓存,再次渲染的时候就不会执行 createdmounted 等钩子函数,所以不会有一般的组件生命周期函数,但是很多业务场景都是希望被缓存的组件再次被渲染的时候做一些事情,activateddeactivated 钩子函数就可以派上用场,它的执行时机是 <keep-alive> 包裹的组件渲染的时候。 组件在 <keep-alive> 内被切换,它的 activateddeactivated这两个生命周期钩子函数将会被对应执行。
1、activated:页面组件被激活的时候调用,第一次渲染(首次进入组件)的时候会被调用:created -> mounted -> activated。之后每次<keep-alive> 激活activated被调用,所以可以在每次进入页面的时候获取最新的数据。
2、deactivated:页面组件被停用时调用。

配合<router-view>使用

<keep-alive>除了可以包裹普通组件外,它还可以配合 <router-view> 使用,将整个路由页面一起缓存下来,实际使用场景比较多。
举个例子:首页list,默认在list页面。B跳转到list,list不刷新;C跳转到list,list刷新。
在2.1.0之前,在路由选项中,配置meta属性,keepAlive为true即为需要缓存的组件,大多数写法是这样的:

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
复制代码
//router配置
new Router({
    routes: [
        {
            name: 'list',
            path: '/list',
            component: list,
            meta: {
                keepAlive: true // // 需要被缓存
            }
        }
    ]
})
复制代码

用到组件内的路由守卫,在 B 组件里面设置 beforeRouteLeave:

export default {
	data() {
		return {};
	},
	methods: {},
	beforeRouteLeave(to, from, next) {
		 // 设置下一个路由的 meta
		to.meta.keepAlive = true;  // 让 list 缓存,即不刷新
		next();
	}
};
复制代码

用到组件内的路由守卫,在 C 组件里面设置 beforeRouteLeave:

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.keepAlive = false;  // 让 list 不缓存,即刷新
            next();
        }
};
复制代码

include 和 exclude

2.1.0新增了include和exclued属性,允许组件有条件地缓存,可以是字符串、正则表达式或数组。include 表示只有匹配的组件会被缓存,而 exclude 表示任何匹配的组件都不会被缓存。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
复制代码
<!-- 一个include解决了,不需要多写一个标签,也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
    <router-view></router-view>
</keeo-alive>
复制代码

<keep-alive> 先匹配被包含组件的 name 字段,如果 name 不可用,则匹配当前组件 components 配置中的注册名称。

结束语

本来应该举详细的栗子来分析下场景,但都是公司项目,不便贴出。所以,我没骗你吧,我真没举例子。自己太懒,又不想写demo,我....懒。
本文提供一种解决思路,仅做参考。如有不当之处,烦请不吝指出。另外,如对本文内容有意见或建议,欢迎一起交流探讨。

关注下面的标签,发现更多相似文章
评论