vue keep-alive源码

Vue 的 keep-alive 组件是用来缓存具有相同组件名称的组件的，例如在一个 Tab 页中不同的 Tab 相互切换时，当前 Tab 中的组件及其状态可以被 keep-alive 缓存，以避免在该 Tab 内重复加载组件和数据。

源码中实现了两个生命周期方法 activate() 和 deactivate() 来控制缓存中的组件的挂载和卸载。缓存中的组件通过 mount() 方法来挂载，并在 activated 钩子函数中调用 vnode 的 activated 钩子函数和组件的 activated 钩子函数。

当组件被激活（activated）时，keep-alive 会调用 activate() 方法，该方法会检查被缓存组件的缓存状态，并通过缓存对象的 updated 标志来决定组件是否需要重新挂载。如果需要重新挂载，则通过缓存对象的 vnode 函数重新渲染组件，并调用新组件的 mounted 和 activated 钩子函数。

当组件被停用（deactivated）时，keep-alive 会调用 deactivate() 方法，该方法会调用被缓存组件的 deactivated 钩子函数，并通过 VNode 的 tag 属性判断组件是否需要被销毁。如果不需要被销毁，则缓存对象会记录其销毁状态并保留其状态，下次使用时可以快速还原组件。如果需要被销毁，则通过调用缓存对象的 destroy() 方法来销毁组件并释放资源。

总之，Vue keep-alive 组件通过缓存组件的方式来提高应用程序的性能和用户体验，实现了快速切换和缓存组件的功能。它的核心在于更新缓存中的组件，并且在组件被激活和停用时触发生命周期函数来维护组件的状态。