前言
不知道大家日常有没有遇到这种情况,填写了好一会的表单,跳转了个页面,再次返回的时候,表单已经被清空了,用户体验非常友好,那有没有什么办法可以解决这个问题呢?其实通过vue的keep-alive语法就能解决这个问题。
未优化前
概念
1. 什么是 keep-alive?
在使用keep-alive
之前我们首先要知道什么是keep-alive
?keep-alive
是vue
的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。它自身不会渲染成一个DOM
元素,也不会出现在父组件链中。
2. keep-alive 的作用?
组件切换的过程中将状态保留在内存中,防止重复渲染DOM
,减少加载时间及性能消耗,提高用户体验性。
3. keep-alive 的原理?
在created
生命周期函数调用时将需要缓存的VNode
节点保存在this.cache
中,在页面渲染时,如果VNode
的name
符合缓存条件(可以用include
以及exclude
控制),则会从this.cache
中取出之前缓存的VNode
实例进行渲染。
4. keep-alive 有哪些参数?
keep-alive
可以接收3
个属性做为参数进行匹配对应的组件进行缓存:
5. keep-alive 的生命周期函数?
只有组件被keep-alive
包裹时,这两个生命周期函数才会被调用,如果作为正常组件使用,是不会被调用的,以及在2.1.0
版本之后,使用exclude
排除之后,就算被包裹在keep-alive
中,这两个钩子函数依然不会被调用。另外,在服务端渲染时,此钩子函数也不会被调用。
看到这里,相信你对keep-alive
已经有了初步的认识,那具体在项目中要怎么使用呢?下面进入实战操作。
使用
1. 在
App.vue
文件中添加keep-alive
标签
App.vue
<template><div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" /></div></template>
2. 在路由文件中添加
meta
(未跳转之前的页面)
router/index.js
{path: '/as',name: 'as',component: () => import('@/views/as'),meta: {keepAlive: true}},
3. 在跳转的新页面中添加
beforeRouteLeave
views/ass.vue
methods: {beforeRouteLeave(to, from, next) {to.meta.keepAlive = true;next(0);},},
3.1 生命周期的执行顺序
1.不使用keep-alive
的情况:
beforeRouteEnter --> created --> mounted --> destroyed
2.使用keep-alive
的情况:
beforeRouteEnter --> created --> mounted --> activated --> deactivated
3.使用keep-alive
,并且再次进入了缓存页面的情况:
beforeRouteEnter --> activated --> deactivated
3.2 让我们一起来看看优化后的效果