javascript - Vue - 强制重新渲染所有组件

Question

我为Vue编写了一个插件，并且在重新渲染时遇到了一些问题。实际上有一个新的过滤器，它可以用全局定义的语言翻译给定的文本。当语言发生变化时，应再次翻译文本。因为这里没有过滤器的事件队列，如果语言发生变化，我想强制所有组件重新呈现自己。因此过滤器功能将被评估为新的。
我知道我可以使用vm.$forceUpdate(). 但是我怎么能告诉整个 Vue 组件树重新渲染呢？因为这种情况只会发生，如果用户更改语言，性能问题应该不是问题，导致至少用户不必重新加载整个页面并且可以离线执行此操作。有什么建议么？

Answer 1

您可以在组件根目录中使用key属性。更改它，组件树将被重新渲染。

每个文档（粗体是我的）：

它还可以用于强制替换元素/组件 而不是重用它。当您想要：

• 正确触发组件的生命周期钩子
• 触发转换

例如：

<transition>
   <span :key="text">{{ text }}</span>
</transition>

text更改时，总是<span>会替换而不是修补，因此将触发转换。