keep-alive相关

是什么？

    keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。

作用

 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

有哪些属性？

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

生命周期函数

被keep-alive包裹的组件会多出两个生命周期钩子函数

 1. activated

      在 keep-alive 组件激活时调用

  2. deactivated

      在 keep-alive 组件停用时调用

原理

    在 created 生命周期函数调用时将需要缓存的虚拟DOM保存在 this.cache 中，在 页面渲染时，如果DOM对象的 name 符合缓存条件（可以用 include 、exclude 控制），则会从 this.cache 中取出之前缓存的虚拟DOM实例进行渲染。