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

Question

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

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

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

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

Answer 1

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

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

IE

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