关于Keep-alive的认识和具体用法

一、keep-alive是什么

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive可以设置以下属性：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。除了名称匹配的组件不会被缓存，其他组件都会被缓存
max - 数字。最多可以缓存多少组件实例

二、keep-alive使用场景

当我们在切换路由需要保存失活组件的状态的时候能够用到。
例：
浏览淘宝滑动的中间位置，然后又去购物车页面，再回到首页的时候能够保存住我刚才滑动的位置。

三、keep-alive如何使用

1、全局范围内使用：保存在app.vue组件中

2、局部缓存：

①在router.js中设置要缓存的页面

②用v-if来显示router-view是否在keep-alive中出现

注意：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在

四、keep-alive原理分析

keep-alive是vue中内置的一个组件
在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。
VNode：虚拟DOM，其实就是一个JS对象