Vue keep alive 在 $destroy 之后不再缓存答案

【问题标题】：Vue keep alive doesn't cache again after $destroyVue keep alive 在 $destroy 之后不再缓存
【发布时间】：2020-08-25 17:31:37
【问题描述】：

我有时想从 keep-alive 缓存中删除我的组件。

首先我按照以下步骤测试组件是否在缓存中：

我点击“goto foo”的应用组件。
在 foo 中，我单击“获取随机数”给我一个数字。
然后我点击“返回”（在浏览器中）并返回到 app/bar 组件。
再次单击“goto foo” - 数字仍然存在。

到目前为止，我看到 keep alive 是有效的。

现在我想从缓存中删除这个组件。所以下次我访问它会得到初始状态。
- 为此，我单击 - “从保持活动中删除”（它只是调用了 $destroy，仅此而已）。
我点击“返回”（在浏览器中）并返回到 app/bar 组件。
再次单击“goto foo” - 数字不存在 - 好吧。
现在我希望保持活动状态以将我的组件存储在缓存中，所以我单击“获取随机数”，它给了我一个数字。
然后我点击“返回”（在浏览器中）并返回到 app/bar 组件。
再次点击“goto foo” - 数字不存在 - 缓存不起作用。

我该如何解决这个问题？如何从keep alive缓存中移除组件，并且下次仍然可以缓存？

这里是codesandbox.io中的源代码

【问题讨论】：

Vue 文档建议不要手动销毁组件，而是使用 v-if 从 DOM 中添加和删除它。我认为你也可以在类似的路线上做一些事情。 vuejs.org/v2/api/#vm-destroy
不确定是否有其他方法..
使用 v-if 可以解决您的问题，对吗？否则，您将不得不再次手动安装组件，我认为这不是必需的。
什么是删除并再次创建？如果您想更新数据，请将所需的数据属性存储到另一个属性，并在需要更新时重新分配它们

标签： vue.js

【解决方案1】：

我强烈建议您查看keep-alive 的源代码，它应该能让您更清楚地了解到底发生了什么以及可能发生的事情：

https://github.com/vuejs/vue/blob/0baa129d4cad44cf1847b0eaf07e95d4c71ab494/src/core/components/keep-alive.js

我自己看了看，似乎支持使用include 和exclude 清除缓存条目。下面是我整理的一个示例，说明了它是如何完成的：

new Vue({
  el: '#app',
  
  components: {
    red: {
      template: `<div style="color: red">red: {{ num }}</div>`,
      
      data () {
        return { num: Math.random() }
      }
    },
    
    blue: {
      template: `<div style="color: blue">blue: {{ num }}</div>`,
      
      data () {
        return { num: Math.random() }
      }
    }
  },
  
  data () {
    return {
      exc: '',
      type: 'red'
    }
  },
  
  methods: {
    async purge (name) {
      if (this.type === name) {
        this.type = false
      }
      
      this.exc = name
      
      await this.$nextTick()
      
      this.exc = ''
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <keep-alive :exclude="exc">
    <component :is="type"></component>
  </keep-alive>
  <button @click="type = type === 'red' ? 'blue' : 'red'">Toggle</button>
  <button @click="purge('red')">Purge Red</button>
  <button @click="purge('blue')">Purge Blue</button>
</div>

我暂时设置了 exclude 属性的值来清除缓存条目，然后将其设置回空白，以便后续组件仍然可以被缓存。

在您的示例中，我建议从孩子发出一个事件，告诉父母移除孩子，而不是让孩子自我毁灭。

【讨论】：