前言
进入了解 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同级
总结
提示:简述不完美