Vue.js 强制重新渲染包含 v-once 指令的组件答案

【问题标题】：Vue.js force re-render of component which contains v-once directiveVue.js 强制重新渲染包含 v-once 指令的组件
【发布时间】：2017-04-14 02:55:36
【问题描述】：

我有一个包含 div 的组件，该组件使用 v-once 指令来防止重新渲染。当 URL 参数更改时（即单击 vue-router 链接，更改组件中使用的 url 和参数），同一组件会更新其显示的数据。

组件成功地使用新数据重新渲染所有内容（基于 URL 参数）除了带有 v-once 指令的 div。该 div 不会刷新、重新加载或重新渲染。

我尝试在数据更改时使用观察者和vm.$forceUpdate()，但这没有任何效果。

有没有办法强制整个组件重新渲染？特别是带有v-once 指令的部分？我希望组件在 URL 参数更改时重新呈现，但仍然不会在数据更改时重新呈现。

【问题讨论】：

【解决方案1】：

这个用例可以通过将v-once组件包围在一个容器中，然后触发组件重新渲染来解决。

我能够通过在容器内的相关组件上使用:key="$route.params.id" 来触发组件重新渲染。

即

<div id="container-component">
  <custom-component :key="$route.params.id"></custom-component>
</div>

【讨论】：

【解决方案2】：

与v-once 的文档一样，如果您已将其应用于元素，则即使更改了使用的变量，该元素也不会更新。来自文档：

只渲染元素和组件一次。在随后的重新渲染中，元素/组件及其所有子元素将被视为静态内容并被跳过。这可用于优化更新性能。

如果你想更新元素，你不应该使用v-once 指令。

【讨论】：