Vue的KeepAlive（如何缓存组件状态？）

介绍

  <KeepAlive> 是Vue的一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

    默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

应用场景

    如果想在切换组件时，保留原来的状态，可以用<KeepAlive> 包裹起来。

    当组件在 <keep-alive> 内被切换时，它的激活和停用状态会被 Vue 管理，而不是被销毁和重建。这可以帮助我们避免在组件切换时产生不必要的性能开销，提高用户体验。

基本用法

        在 Vue 中使用 keep-alive 很简单，只需要将需要缓存的组件包裹在 <keep-alive> 标签内即可：

<keep-alive>  
  <component :is="currentComponent"></component>  
</keep-alive>

        在这个例子中，currentComponent 是一个动态组件，它的值可能会根据某些条件而改变。使用 <keep-alive> 后，即使 currentComponent 的值改变，Vue 也不会销毁旧的组件实例，而是将其缓存起来，并在需要时重新激活。   

属性

  <keep-alive> 组件有两个重要的属性：include 和 exclude，不常用的属性：max  

• include：只有匹配的组件会被缓存。值可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组。
• exclude：任何匹配的组件都不会被缓存。值可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组。
• max: 限制可被缓存的最大组件实例数。值是number。

include 和 exclude这两个属性可以帮助你更精细地控制哪些组件应该被缓存。

生命周期钩子

    当组件被 <keep-alive> 包裹时，它的生命周期钩子会有所不同。特别是 created 和 mounted 钩子只会在组件首次创建和挂载时调用，而 activated 和 deactivated 钩子则会在组件被激活和停用时调用。

• activated：组件被激活时调用，该钩子在服务器端渲染期间不被调用。
• deactivated：组件停用时调用，该钩子在服务器端渲染期间不被调用。

    在Vue3中，当一个组件在 <KeepAlive> 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于 <KeepAlive> 的直接子节点及其所有子孙节点。

总结

  <keep-alive> 是 Vue 中一个非常有用的组件，它可以帮助我们提高应用的性能，减少不必要的组件销毁和重建。但是，在使用它时，我们也需要注意其适用场景和生命周期钩子的差异，以确保正确地使用它。