Vue中KeepAlive 原理与源码分析

概念

keep-alive是Vue的一个内置实例，用于缓存组件。当keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是摧毁它们。keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链之中。如需要在两个组件之间来回切换，或者从一个分类页跳转到详情页，之后再返回分类页，仍然可以保持上次的状态，又或者在浏览首页时重新切换回来，滚动条会保持在上次位置（等等），这时候我们就可以用到keep-alive组件。

作用

• 在组件切换的过程中将状态保留在内存。 * 防止重复渲染DOM，减少加载时间以及性能的消耗，提高用户的体验感。 Props(参数)
  =========

• include - string | RegExp | Array。只有名称匹配的组件会被缓存。

• exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。

• max - number | string。最多可以缓存多少组件实例。

生命周期函数

activated ： 在组件激活的时候使用，第一次激活是在mounted之后执行。

deactivated ： 在失效的时候使用。

注意 ：

• 被包含在keep-alive中创建的组件，会多出两个生命周期的钩子：activated和deactivated
• 使用keep-alive会将数据保留在内存中，如果要在每次进入页面的时候获取最新数据，需要在activated阶段获取数据，承担原来created钩子函数中获取数据的任务。

用法

• keep-alive的使用只需要在动态组件的最外层添加标签即可。

在动态组件中的应用
<!-- 基本 -->
<keep-alive><compone