javascript - vue的keep-alive在include缓存过的页面从include删除，再次打开还是显示缓存的页面？

Question

<section class="app-main">    {{ cachedViews }}  // [A,B]    <transition name="fade-transform" mode="out-in">      <keep-alive :include="cachedViews">        <router-view :key="key" />      </keep-alive>    </transition>  </section>

如果把cachedViews中的A页面删除掉，cachedViews变成[B],然后再次打开A页面，A页面还是有之前缓存的内容（比如页面输入框之前输入的文字），如何让他从cachedViews中删除，再次打开是个全新的页面？

Answer 1

确实，<keep-alive> 在 Vue 中是用来缓存不活跃的组件实例的，而 :include 绑定用于指定哪些组件应该被缓存。如果你从 cachedViews 数组中移除了某个组件名（例如 "A"），并且期望再次访问该组件时得到的是一个全新的实例而不是缓存的实例，那么你需要确保 Vue 路由在切换时能够识别这种变化并重新创建组件实例。

这里的关键在于，<keep-alive> 只会对在 include 列表中并且已经被创建过的组件实例进行缓存。一旦你从 cachedViews 中移除了某个组件名，并且再次访问该组件，Vue 将会根据路由配置重新创建该组件的实例，而不是从缓存中恢复。

然而，如果你发现即使从 cachedViews 中移除了某个组件名，再次打开该页面时仍然显示的是缓存的内容，这可能是由以下原因造成的：

1. 路由缓存：除了 <keep-alive> 外，Vue Router 本身也可能有缓存机制。确保你的路由配置没有启用其他形式的缓存。
2. 组件内部状态：即使组件实例被重新创建，如果组件内部有持久化状态（例如通过 Vuex、localStorage 等方式），那么这些状态可能会在组件重新创建时恢复。确保清除或重置这些状态。
3. 浏览器缓存：有时，浏览器自身也可能缓存页面内容。确保在开发过程中禁用了浏览器缓存，或者在部署时设置了适当的缓存控制头。
4. Vue 版本和 Bug：确保你使用的 Vue 和 Vue Router 版本是稳定且无相关缓存问题的。查看相关 issue 和文档更新可能会有所帮助。

针对你的问题，如果你已经从 cachedViews 中移除了 "A" 页面，并且确保没有其他缓存机制在起作用，那么再次访问 "A" 页面时，Vue 应该为你创建一个全新的组件实例。如果仍然出现问题，建议检查上述提到的可能原因，并尝试清除或重置任何可能影响页面状态的外部因素。

如果你需要确保每次访问页面时都是全新的实例，并且不希望使用 <keep-alive> 进行缓存，那么可以考虑不使用 <keep-alive>，或者动态地控制 <keep-alive> 的绑定，以确保在需要时完全禁用缓存。