Vue.js 如何缓存动态实例化的Vue组件？

在我的应用程序中，我以编程方式实例化了一个对话框组件。对话框可以（确实）包含用于显示内容的子组件。我这样做：

//创建包含对话框的组件。
//我不在乎是否缓存了它，这很容易
//重新创造。
//
var DialogComponent=Vue.extend（Dialog）；
var实例=新的DialogComponent({
家长：家长，
数据：{…}
propsData:{…}
});
//编译子组件字符串。实际上，这将
//在传递给之前动态生成
//Vue.compile（）
// 
常量模板=“”
const x=Vue.compile（模板）；
常数slotContent={
data（）{return data}，
渲染：x.render，
staticRenderFns:x.staticRenderFns
}
//从编译的渲染函数创建vnode。这
//是我不太自信的部分，因为它看起来是
//返回的呈现函数将始终实例化新的
//子组件，感觉像是包含了“实例”，
//即对话框不正确。
//
const vnode=instance.$createElement（slotContent）；
实例。$slots.default=[vnode]；
//将对话框组件装载到DOM元素。
// 
var tmp=document.createElement（'div'）；
文件.正文.附件（tmp）；
实例。$mount（tmp）；
//钩住对话框关闭事件以清理实例。
//实际上，在缓存时，我希望
//子组件退出，仅销毁对话框实例。
//我可以成功设置孩子的vnode.data.keepAlive和
//持久化实例，但仍然会创建一个新实例。
// 
实例.$on（'close'，（e）=>{
实例$el.parentNode.removeChild（实例$el）；
实例。$destroy（）；
})

我相信这是实现这一目标的公认方式，而且它工作得完美无缺。但是，每次对话框消失时，它当然会被销毁，并且当再次显示时，组件会重置

现在，我需要一种在对话框关闭和重新打开时保持子组件状态的方法。因此，想象一个对话框在创建时显示一个

新日期（）

——我需要在对话框关闭和重新打开后显示相同的日期。我尝试过各种各样的

，但都没有效果，但我认为这不是该组件的适当用法

缓存vnode成功地避免了

compile

调用，但因为（我认为）返回的呈现函数实例化了组件实例（

ComponentName

，在示例中），它不会重用原始的

ComponentName

，即使我成功地避免了销毁它（

vm.\u isDestroyed==false

）

最后，我认为我希望在插入子组件时在vue/create-component.js中命中，但那里的断点从未命中（这可能是一个不相关的网页/源映射）

---

是否有一种合理的方法来完成对以编程方式实例化的Vue组件的缓存，以便以后重复使用，类似于

的工作方式？

如果您对维护组件的状态感兴趣，那么vuex或其他状态管理实用程序可能适合？这是一个很好的建议，也许这就是我最终要做的。尽管如此，我有一个非常简单的API来创建“对话”，并且一些子状态看起来非常琐碎。我想了解Vue如何在内存缓存中执行操作，例如，如果可能，使用组件。