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

Question

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

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

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

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

Answer 1

作为 v-once 的文档，如果您将它应用于某个元素，则即使使用的变量发生更改，该元素也不会更新。来自文档：

Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.

如果要更新元素，则不应使用 v-once 指令。

Answer 2

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

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

即

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

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

Vue.js force re-render of component which contains v-once directive

javascript

vue.js

vue-router

vue-component