深入学习keepalive

keepalive是我们在vue项目中经常使用的一个功能，可以让页面数据暂时缓存，不过他是如何缓存的？如何保持数据不更新的？

概念：

“keep-alive”包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和“transition”标签相似，都是抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中。

当组件在"keep-alive"内被切换的时候，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

主要用于保留组件状态或避免重新渲染。

属性：

1. include和exclude prop允许组件有条件的缓存。
2. max：最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

缓存流程：

为什么keep-alive不会生成真正的DOM节点？

因为在vue初始化生命周期的时候，为组件建立父子关系会根据abstract属性决定是否忽略某个组件。而keep-alive设置的abstract：true。就会跳过它的组件实例。

在keep-alive里包裹的组件是如何实现数据不重新更新？

1. 在每个被包裹的组件都会被设置keepalive：true。当首次加载被包裹组件时，keep-alive作为父组件，render函数会先于被包裹组件执行，进行一次也是最后一次初始化。并且我们的组件实例已经存入缓存。
2. 再次访问时会去判断，如果组件实例和keepalive都是true时，就不再进入$mount过程，那mounted之前的所有钩子函数就不会再执行，包括beforecreate，created，mounted都不再执行。