Vue - 强制重新渲染所有组件
Vue - Force Rerendering Of All Components
我已经为 Vue 编写了一个插件，但在重新渲染时遇到了一些问题。事实上有一个新的过滤器，它通过全球定义的语言翻译给定的文本。当语言发生变化时，应重新翻译文本。因为这里没有过滤器的事件队列，如果语言发生变化，我想强制所有组件重新呈现自己。所以过滤器函数将被评估为新的。
我知道我可以使用 vm.$forceUpdate() 重新渲染组件本身。但是我怎样才能让整个 Vue 组件树重新渲染呢？导致这种情况只会发生，如果用户更改语言，性能问题应该不是问题，至少用户不必重新加载整个页面并且可以离线执行此操作。
有什么建议吗？
您可以在组件根目录中使用 key attribute。改变它，组件树将被重新渲染。
Per docs（粗体是我的）：
It can also be used to force replacement of an element/component
instead of reusing it. This can be useful when you want to:
- Properly trigger lifecycle hooks of a component
- Trigger transitions
For example:
<transition>
<span :key="text">{{ text }}</span>
</transition>
When text changes, the <span> will always be replaced instead of
patched, so a transition will be triggered.
我已经为 Vue 编写了一个插件，但在重新渲染时遇到了一些问题。事实上有一个新的过滤器，它通过全球定义的语言翻译给定的文本。当语言发生变化时，应重新翻译文本。因为这里没有过滤器的事件队列，如果语言发生变化，我想强制所有组件重新呈现自己。所以过滤器函数将被评估为新的。
我知道我可以使用 vm.$forceUpdate() 重新渲染组件本身。但是我怎样才能让整个 Vue 组件树重新渲染呢？导致这种情况只会发生，如果用户更改语言，性能问题应该不是问题，至少用户不必重新加载整个页面并且可以离线执行此操作。
有什么建议吗？
您可以在组件根目录中使用 key attribute。改变它，组件树将被重新渲染。
Per docs（粗体是我的）：
It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:
- Properly trigger lifecycle hooks of a component
- Trigger transitions
For example:
<transition> <span :key="text">{{ text }}</span> </transition>When
textchanges, the<span>will always be replaced instead of patched, so a transition will be triggered.