Принудительная перезагрузка компонентов: как в Vue.js?

Быстрый ответ

Чтобы инициировать перерисовку в Vue.js, обновите значение атрибута :key у компонента, что вызовет его пересоздание:

<template>
  <your-component :key="forceRenderKey"></your-component>
</template>

<script>
export default {
  data() {
    return {
      forceRenderKey: 0
    };
  },
  methods: {
    reRender() {
      this.forceRenderKey++; // Эквивалент Ctrl+R для Vue.js 😉
    }
  }
};
</script>

Для старта процесса перерисовки вызовите метод reRender(). При этом значение forceRenderKey увеличится, и Vue намеренно откажется от текущего экземпляра и создаст новый для <your-component>.

Прелесть реактивности Vue.js

Vue.js поддерживает принципы реактивности, автоматически обновляя интерфейс при изменении данных. Прежде чем опираться на this.$forceUpdate(), посмотрите на встроенные в Vue реактивные возможности:

• Вычисляемые свойства: Они кэшируются и перевычисляются только тогда, когда меняются их зависимости, автоматически обновляя DOM в случае изменения данных.
• Наблюдатели: Они позволяют выполнить сложную логику в ответ на изменения в данных с использованием опции watch.
• Vue.set() или vm.$set(): Они используются для отслеживания реактивности динамически добавленных к объектам свойств.

:key – ключ к перерисовке

Изменение значения, привязанного к :key, приводит к пересозданию компонента. Используйте это с осторожностью:

<template>
  <your-component :key="reactiveKey"></your-component>
</template>

<script>
export default {
  computed: {
    reactiveKey() {
      // Генерируем ключ, исходя из данных, влияющих на отображение компонента
    }
  },
};
</script>

Меняйте reactiveKey в тех случаях, когда иначе отследить изменения данных невозможно.

Управление реактивностью свойств

Проверьте реактивность свойств в data. Vue не отслеживает изменения в свойствах, которые были добавлены уже после создания компонента. Все свойства должны быть объявлены заранее или добавлены через методы set.

Маршрутизатор в помощь

В Одностраничных приложениях (SPA) можно перезагрузить компоненты маршрутов с помощью метода Vue Router:

this.$router.go(0); // Полный перезапуск для одностраничного приложения!

Визуализация

Визуализируем работу компонентов Vue и их стабильность:

Vue Компонент (🏠): [🖼 Окно A, 🚪 Дверь B] (🔄 Стабильность)

Процесс перезагрузки – это как включение света:

// Метод Vue
this.$forceUpdate(); // 💡 Выключатель

В результате:

До: 🏠 ↔️ [🖼🚪] (🔄) После: 🏠 ↔️ [🖼🚪] (💡💥)

Как переключение света, так и $forceUpdate обновляет видимость компонента Vue.

Реальные сценарии

Обновление не реактивных свойств

Если свойство было добавлено к объекту после его создания, Vue не обнаружит изменения. В этом случае используйте Vue.set() или vm.$set():

Vue.set(this.someObject, 'newProperty', 'newValue'); // Указываем Vue следить за новым свойством!

Подробнее об этом расскажет наш спикер на видео

Когда использование $forceUpdate оправдано

• Сторонние API: Когда вы взаимодействуете с библиотеками, не связанными с Vue.
• Ручные изменения в DOM: Если вы вмешиваетесь в DOM, обходя реактивность Vue.

Переусложнение кода с помощью $forceUpdate

Неправильное использование $forceUpdate ведет к усложнению кода и снижению производительности. Воспринимайте его как индикатор проблем с реактивностью, а не как решение этих проблем.

Где это нежелательно

• Реакция на изменения: Компонент должен сам реагировать на изменения в данных.
• Большое количество анимаций: Использование $forceUpdate для управления анимациями ухудшает производительность и усложняет поддержку кода — используйте анимации Vue.
• Обработка пользователя: Используйте реактивные методы для работы с пользовательскими данными, вместо непосредственной модификации через $forceUpdate.

Полезные материалы

1. Подробно о реактивности | Vue.js – Полное руководство по реактивности Vue.
2. Справочник API | Vue.js — Информация о методе vm.$forceUpdate() для принудительного обновления в Vue.js.
3. Основы компонентов | Vue.js — Как создать принудительную перерисовку в Vue.js.
4. Миксины — Vue.js — Позволяют повторно использовать функциональность через механизмы перерисовки.
5. Проблемы · vuejs/vue · GitHub — Обсуждения на GitHub касательно трудностей принудительной перерисовки в Vue.js.
6. Vue Mastery | Лучший способ изучить Vue.js — Статья о принудительной перерисовке компонентов Vue.
7. Обсуждения vuejs/core – GitHub — Отзывы и обсуждение стратегий перерисовки в ядре Vue.js.