一分钟搞懂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（组价离开时调用）