Vue组件的缓存机制如何实现长尾词优化？

本文共计1367个文字，预计阅读时间需要6分钟。

在《Vue一个案例引导的动态组件与全局事件绑定总结》一文中，简要提到了组件的缓存。当时仅提供了一种解决思路，并未详细阐述组件缓存的多种应用场景。今天，我们将深入探讨组件缓存的多种用途。

之前在《Vue一个案例引发的动态组件与全局事件绑定总结》这篇文章中简单提到过组件的缓存。当时只是简单的提供了一个解决问题的思路，并没有说到多少组件缓存的东西，今天我们就来详细说说组件的缓存。

组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来。

自然就存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它能够让我们更好的实现组件的切换。

在实际的项目开发中，产品是不可能放过我们的，需求总是在不停的变化，如果你碰到那些不改需求的产品就嫁了吧，太难得了。

最近项目中需要实现一个保留上一次Tab 页的功能。如下图，当我选择 B 组件时，我希望从首页切换到设置页时，还会停留在 B 组件，而不是重新渲染为默认的 A 组件。

首先我们可以使用内置组件 <component>实现动态组件的效果。