Vue.js动态组件重新加载

Question

我有一个vue.js应用，我使用component标记和:is="currentView"方法来更改活动视图。我有一台＆＃34;状态机＆＃34;它根据某些业务逻辑跟踪从组件到另一个组件的有效转换。有时这会告诉vue实例currentView的新值与旧值相同。如果发生这种情况，则不会重新加载组件。有什么方法可以强制组件重新加载，即使视图是相同的？那就是我希望重新加载数据，并且生命周期挂钩正在执行。

Answer 1

您可以为组件定义添加唯一的key属性，以便正确触发所有组件生命周期方法。

您的组件定义应如下所示：

<component :is="view" :key="unique_key"></component>

有用的链接：

Reloading a dynamic component

Vue 'key' api reference

Answer 2

这似乎可以解决问题，但是它会导致视图闪烁，有没有办法可以避免这种情况？

  const oldView = this.currentView
  this.currentView = engine.advance()
  if(this.currentView == oldView) {
    //force reload!
    this.currentView = ''
    this.$nextTick(function () {
      this.currentView = oldView
    })
  }