$destroy 函数是否会从缓存中删除 Vue 自定义组件答案

【问题标题】：Does $destroy function removes the Vue Custom component from cache$destroy 函数是否会从缓存中删除 Vue 自定义组件
【发布时间】：2018-12-08 22:31:58
【问题描述】：

我使用我的顶级组件动态构建父子和子 Vue 自定义组件的深层嵌套树，然后我正在更新构建所有树的数据。它具有渲染整个树的效果（它是具有各种自定义组件的表单）。我在获取数据（这是 vue 对反应数据所做的事情）后刷新/重建整个表单，这些数据本身告诉我如何重新生成视图（它就像我渲染整个视图的 JSON 模式）。

这与我的另一个问题here有关。

我在我的 Vue 应用程序中观察到一个非常奇怪的行为。当我销毁所有子组件并重建数据以强制呈现表单时，似乎即使在我对每个子组件都调用了 $destroy 之后......Vue 并没有完全从缓存中删除它们？

如果调用 $destroy，vue 是否会从缓存中删除组件？

因为我在 Chrome Vue DevTool 扩展面板的 Vue 组件列表中没有看到多个相同类型的组件。但我看到同一个自定义事件由同一个组件处理两次。即使在这种类型的 Vue DevTools 中只有一个组件可见，处理事件的相同函数也会被调用两次。

这只会在我呈现表单后发生。第一次加载页面时，一切正常。然后在我通过销毁子组件并重置数据以重新呈现表单来重置表单之后，神奇地这个子组件开始处理事件两次......并在第三次渲染中处理三次事件。但我在 google chrome VueJS DevTool 扩展面板中只看到一个组件。所以我的猜测是，vue 仍然将之前销毁的组件保存在缓存中。我想弄清楚我应该如何销毁缓存中的那些组件。

如果有人观察到类似情况并找到解决方案，请告诉我。

目前我将深入挖掘我的组件键（这个特定组件没有我设置的显式键）。

【问题讨论】：

如果您可以添加代码示例，我可以自定义我的一般答案

标签： vue.js vuejs2 vue-component

【解决方案1】：

首先，vue 文档指出：

vm.$destroy

在正常使用情况下，您不必自己调用此方法。 更喜欢在数据驱动中控制子组件的生命周期时尚使用 v-if 和 v-for。

因此，与其自己手动销毁和重建组件，不如让 vue 通过v-if 和v-for 来处理它。如果组件没有根据您的更改进行更新，您可能正在处理 reactivity 问题。

正如您提到的，这是一个深度嵌套的结构，反应性是使组件与数据保持同步的关键。

Vue 不允许动态地将新的根级反应属性添加到已创建的实例中。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加反应属性：

Vue.set(vm.someObject, 'b', 2)

组件内部：

this.$set(this.someObject, 'b', 2)

另外，请记住，Vue 应该在组件管理方面承担繁重的工作，而您应该定义渲染组件的参数。

【讨论】：