Vue：组件缓存

组件缓存 keep-alive

文章目录

• [组件缓存 keep-alive](#组件缓存 keep-alive)
• • 一、keep-alive是什么
  • 二、keep-alive优点
  • 三、问题
  • 四、解决方案
  • • 五、代码示例
  • 六、回顾一下钩子
  • 七、总结

一、keep-alive是什么

• keep-alive是Vue中的一个内置组件，会缓存不活动的组件实例。并不会销毁组件，导致重新回到这个页面的时候，重新加载。
• keep-alive不会渲染DOM元素。

---

二、keep-alive优点

---

其目的就是为了防止重复渲染DOM，减少加载时间以及性能的消耗。能够提高用户的体验。

---

三、问题

• 包裹了 keep-alive 一级路由都会被缓存

<template>
	<keep-alive>
	//谁往这里出我就缓存谁
		<router-view></router-view>
	</keep-alive>
</template>

---

四、解决方案

① include ： 组件名数组，只有匹配的组件会被缓存

② exclude ：组件名数组，任何匹配的组件都不会被缓存

③ max ： 最多可以缓存多少组件实例

• 注意 ：这里的组件名：指的是name: 组件名 如果没有自己配置组件名，那么才会是文件名。

---

• 需求：如果有两个组件，Layout组件 和 Deteil组件 ，我只想缓存Layout组件

五、代码示例

添加 属性 ：include="组件名数组"

<keep-alive :include="keepArr">
	<router-view>路由出口</router-view>
</keep-alive>

我们还可以配置组件名数组（需要缓存多个的时候）

data () {
	return {
		keepArr: ['Layout']
	}
}

经过缓存后：通过include属性，缓存了Layout组件，而Deteil组件未被缓存。

• 被缓存的会多两个生命周期钩子：

1. actived （激活时，组件被看到时触发）
2. deactived （失活时，离开页面，组件看不见触发）

---

六、回顾一下钩子

• 组件缓存了，就不会执行组件的created mounted 和 destroyed钩子
• 所以组件缓存会给我们提供两个钩子 actived 和 deactived

created () {
	console.log('created 组件被加载了')
},
monted () {
	console.log('monted DOM渲染完了')
},
destroyed () {
	console.log('destroyed 组件被销毁了')
},
=========================================================
activated () {
	alert('返回首页')
	console.log('activated  组件被激活了，看到页面了')
},
deacivated () {
	console.log('deacivated 组件被失活了，离开页面了')
}

---

七、总结

1. keep-alive是什么？

• Vue内置的组件，包裹动态组件，可以缓存组件

2. keep-alive有点？

• 组件切换过程中， 把切换出去的组件保留在内存中（提升性能）

3. keep-alive的三个属性？

• include 组件名数组，只要匹配的都缓存
• exclude 组件名数组， 任何匹配的组件都不会被缓存
• max 最多可以缓存多少个组件

4. keep-alive的使用会触发那两个生命周期钩子函数？

• activated 当组件激活的时候触发该函数 → 进入页面触发
• deactivated 当组件不被使用的时候触发该函数 → 离开页面触发

---