Question

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

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

这是我的代码：

 if (app) {
      app.$destroy();
    } else {
      app = new Vue(Object.assign({
        el: '#app',
      }, { data: { num: Math.random() } }))
    }

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

Answer 1

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

但是给您带来的问题是，当您执行以下代码时：

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

然后显示文档状态：

完全销毁一个虚拟机。清理与其他现有vm的连接，取消绑定所有指令，关闭所有事件侦听器。

因此，他们不会说将vue应用程序附加到该元素的元素必须更改或将会更改。如果要清理DOM，则需要手动删除内容。

在app.$destroy()之后，app变量仍将保留已销毁的vue实例（{app不会被魔术设置）。因此，再次执行该代码不会触发else块。您还必须将app设置为伪造。

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

现在app是undefined，因此在下一次评估if语句时，将评估else块并创建一个新实例。

Answer 2

问题中未指定您的特定用例，但我假设您要更新未自动更新的内容。

要更新组件，您可以使用

this.$forceUpdate()

强制重新加载组件。

Vue JS重新创建根组件

2 个答案: