сила Vue.js пересборка компоненты, который содержит v однократный директиву

Question

Vue 2,0

У меня есть компонент, который содержит DIV с помощью v-once директивы для предотвращения повторного рендеринга. Этот же компонент обновляет данные, которые он отображает при изменении параметров URL (например, клика vue-router, изменение URL-адреса и параметра, используемого в компоненте).

Компонент успешно повторно делает все с новыми данными (на основе URL Params) кроме ДИВ с v-once директивы. Этот div не обновляется, не перезагружается или не перерисовывается.

Я попытался использовать наблюдателя и vm.$forceUpdate(), когда данные изменяются, но это не оказало никакого эффекта.

Есть ли способ заставить весь компонент повторно визуализировать? В частности, часть с директивой v-once? Я хотел бы, чтобы компонент повторно отображал изменение URL-адреса, но все же не перерисовывал при изменении данных.

Answer 1

Как указано в документации к v-once, если вы применили его к элементу, этот элемент не будет обновлен, даже если переменная будет изменена. от документации:

Оденьте элемент и компонент только один раз. При последующем повторном рендеринге элемент/компонент и все его дочерние элементы будут рассматриваться как статический контент и пропущены. Это можно использовать для оптимизации производительности обновлений.

Если вы хотите обновить элемент, вы не должны использовать директиву v-once.

Answer 2

Этот вариант использования можно решить, окружив компонент v-once в контейнере, а затем запустив повторную визуализацию компонентов.

Мне удалось вызвать повторную визуализацию компонента, используя :key="$route.params.id" на соответствующем компоненте из контейнера.

т.е.

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