keep-alive

---

前言

进入了解 keep-alive 的使用

---

一、keep-alive是什么？

包裹动态组件时会缓存不会活动的实例，而不是销毁它，他自身不会渲染dom，不会出现在父组件中，
不仅可以包裹组件 还可以包裹页面。

二、使用步骤

1.使用组件

代码如下（示例）：我们在components下创建几个组件 在父组件中引入 使用

2.点击事件

代码如下（示例）：我们在来几个点击事件 实现tab切换 更好的 展现出 keep-alive 的效果

3.子组件中 添加事件

代码如下（示例）：点击事件 点击数据变化 在没有keep-alive 包裹情况下 会丢失数据

![在这里插入图片描述](https://img-blog.csdnimg.cn/c7a40dc0ba1e46db8fd4eabd9e5cc2f7.png#pic_center

2.keep-alive包裹

代码如下（示例）：此时我们将 子组件标签用keep-alive 包裹 这样点击我们的数据 不丢失

4.动态组件

代码如下（示例）：当子组件比较多 我们在页面包裹太麻烦 可以通过 动态标签 <component :is=’‘组件名’> 来展示所有子组件 动态 :is 属性 加组件名

4.包裹页面

代码如下（示例）： 包裹页面时 也可以让个别页面 不缓存实例 和 缓存实例
白名单-----有缓存 (include=’’ ‘’) 黑名单 ------ 没有缓存 （exclude=[] ） ；

---

4.黑白名单使用

代码如下（示例）：在src中assets里创建一个 excude.js ；js中 export default [‘组件名’] 导出。 注意：要在页面中的 script 下写入name 与data同级

总结

提示：简述不完美