文章目录
- 一、keep-alive是什么?
- 二、具体使用
- 1.包裹缓存动态组件
- 2.包裹缓存页面
- 注意:
- 三、使用keep-alive的好处
- 四、延伸
一、keep-alive是什么?
keep-alive是Vue的内置组件,使用它包裹动态组件时,会缓存不活动的动态组件实例,而不是销毁他们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。
二、具体使用
kepp-alive不但可以包裹缓存动态组件,还可以包裹缓存页面内容。
1.包裹缓存动态组件
如下图,我新建了3个组件,并把它渲染到页面上:
页面效果如下:
当我点击Live1,Live2,Live3时,三个组件之间会来回切换,并且显示的num值也会重新归零。
页面效果如下:
如果我们想在切换的时候,还保留组件的信息,这时就需要用到keep-alive。
下面我们再看效果。
这就实现了缓存不活动的组件实例。我们再实际应用中,并不是需要缓存全部的组件,这时就需要用到keep-alive的白名单,黑名单,也就是keep-alive的include和exclude属性。
被加入黑名单的组件,就不会被缓存,相反的,被加入白名单的组件,就会被缓存。
2.包裹缓存页面
keep-alive同样也能包裹缓存页面,在实际开发中,如我们现在开发了一个商品商城项目,首页的数据是不是经常不变的,这时就可以用keep-alive将首页包裹,减少加载时间及性能消耗,提高用户体验性。
使用方法基本与包裹动态组件相同。使用时只需将其包裹在页面路由外,同样也可以利用白名单和黑名单决定哪些需要被缓存,哪些不需要被缓存。
注意:
使用时在data同级的位置加上name:’’。
三、使用keep-alive的好处
在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。
四、延伸
被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated(组件激活时使用) 与 deactivated(组价离开时调用)