Vue — принудительный рендеринг всех компонентов

Я написал плагин для Vue и у меня возникли проблемы с повторным рендерингом. На самом деле есть новый фильтр, который переводит заданный текст на глобальный определенный язык. При смене языка текст должен быть переведен снова. Поскольку здесь нет очереди событий для фильтров, я хочу заставить все компоненты перерисовываться, если язык изменится. Таким образом, функция фильтра будет оцениваться как новая.
Я знаю, что могу перерисовать сам компонент с помощью vm.$forceUpdate(). Но как я могу заставить все дерево компонентов Vue перерендериться? Потому что это происходит только в том случае, если пользователь меняет язык, проблемы с производительностью не должны быть проблемой, потому что, по крайней мере, пользователю не нужно перезагружать всю страницу, и он может делать это в автономном режиме. Какие-либо предложения?


javascript vue.js rerender vuejs2 model-view
person weilbith    schedule 12.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать атрибут key в корне компонента. Измените его, и дерево компонентов будет перерисовано.

Согласно документам (выделено мной жирным шрифтом):

Его также можно использовать для принудительной замены элемента/компонента вместо его повторного использования. Это может быть полезно, если вы хотите:

  • Правильно запускать хуки жизненного цикла компонента
  • Триггерные переходы

Например:

<transition>
   <span :key="text">{{ text }}</span>
</transition>

При изменении text <span> всегда будет заменяться, а не исправляться, поэтому будет запущен переход.

person acdcjunior    schedule 12.03.2018
comment
Использовал похожее решение. Спасибо за вдохновение. - person weilbith; 16.03.2018
comment
Это помогло мне решить проблему для другой проблемы, когда у меня была вычисленная опора с геттером и сеттером и обменом опор, но значения не изменились. Господи, благослови твою вечную душу - person Ju66ernaut; 26.09.2019