Javascript Vue JS重新创建根组件

我需要销毁并重新创建根应用程序组件。这是我的模板：

<div id="app">
  {{ num }}
</div>

---

此代码在单击按钮时运行，但不会清理模板并刷新我传递的新数据。知道为什么吗？

问题中没有指定您的特定用例，但是我假设您想要更新一些没有自动更新的东西

要更新组件，可以使用

this.$forceUpdate()

---

强制重新加载组件。

我敢肯定，您的尝试以不应该解决的方式解决了问题，或者以错误的方式使用了vue

但对于您的问题，当您执行此代码时：

if (app) {
  app.$destroy();
}

然后，文档说明：

完全销毁虚拟机。清理其与其他现有VM的连接，解除其所有指令的绑定，关闭所有事件侦听器

因此，他们没有说vue应用程序所连接的元素必须或将要更改。如果要清理DOM，则需要手动删除内容

在

app.$destroy（）

之后，

app

变量仍将保存已销毁的vue实例（

app

不会神奇地取消设置）。因此，代码的另一次执行不会触发else块。 您还必须将

app

设置为计算结果为falsy的值

if (app) {
  app.$destroy();
  app = undefined;
}

---

现在

app

是

未定义的

，因此下次计算

如果

station时，将计算

else

块并创建一个新实例。

您可能想使用app。$forceUpdate（）如果设置了

app

，则将调用

app.$destroy（）

，但是

app=new Vue

不是因为它在

else

块中，所以不会重新创建它（

app.$destroy

不会神奇地清空变量

app

）。但你想这样做，而不是更新数据吗；我需要这个功能。你为什么需要这个功能？请指定，如果您不知道，我们所能做的就是猜测我需要重新创建应用程序，因为我允许传递的数据不止一个，您还可以传递您的方法、计算等。您可以创建一个plunker吗？它仍然不起作用。视图没有更改。@未定义您最明显的是没有将

app

的内容还原为再次包含tempalte标记。因为这很好用。但是，这很可能是解决问题的错误方法，不管你想得到什么。@undefined这是你在代码中写的。将

新Vue

移出else块，就不需要单击。你不太了解你到底想做什么以及为什么。

if (app) {
  app.$destroy();
  app = undefined;
}