Vue.js 动态组件重载答案

【问题标题】：Vue.js dynamic component reloadVue.js 动态组件重载
【发布时间】：2015-12-27 12:05:25
【问题描述】：

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

【问题讨论】：

标签： vue.js

【解决方案1】：

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

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

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

有用的链接：

Reloading a dynamic component

Vue 'key' api reference

【讨论】：

请接受这个答案。这是正确的做法。

【解决方案2】：

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

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

【讨论】：