菜鸟看前端(keep-alive)

keep-alive

1.概念

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

2.作用

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

3.原理

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

VNode:虚拟dom，其实就是一个js对象

4.参数

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

5.生命周期函数的变化

被包含在keep-alive中的组件会多出两个生命周期函数：
activated: 在keep-alive组件激活时调用，进入被keep-alive包裹的组件时触发
deactivated:在keep-alive组件离开时都调用

正常生命周期执行函数

使用keep-alive首次进入缓存页面

再次进入keep-alive缓存页面

beikeepAlive包裹的组件首次进入时会触发created，activeated,再次进入就不触发created，因为页面被缓存啦，不需要创建

6.使用方法

1.在全局app.vue中用<keep-alive></keep-alive>把<router-view/>包裹起来

<template>
	<div>
		<keep-alive>
			<router-view/>
		</keep-alive>
	</div>
</template>
...

2.使用v-if判断router中meta来缓存部分页面
app.vue

<template>
	<div>
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>   
		<router-view v-if="! $route.meta.keepAlive"></router-view>

	</div>
</template>

router的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{keepAlive:true}
  },
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue'),
    meta:{keepAlive:false}
  }
]

const router = new VueRouter({
  routes
})

export default router

3.通过include和exclude来缓存部分页面

<template>
	<div>
		<keep-alive include="Home">
			<router-view/>
		</keep-alive>
	</div>
</template>
...

7列表回到上次浏览位置

条件：1、列表页不可使用懒加载延迟加载数据，2、列表页需要使用keepAlive缓存

beforeRouteLeave(to,from,next){  //离开页面之前将高度存储到sessionStorage。这里不建议用localStorage，因为session在关闭浏览器时会自动清除，而local则需要手动清除，有点麻烦。
    sessionStorage.setItem('scrollH',document.getElementById('demo').scrollTop)
    next()
},

activated(){   //在activated生命周期内，从sessionStorage中读取高度值并设置到dom
    if(sessionStorage.getItem('scrollH')){
        document.getElementById('demo').scrollTop=sessionStorage.getItem('scrollH')
    }
},