Будет ли каждый раз перерисовка при нескольких присваиваниях в mounted во Vue?

Перерисовка при нескольких присваиваниях в mounted во Vue

Краткий ответ

Да, каждое присваивание реактивной переменной в mounted вызывает перерисовку компонента. Vue отслеживает изменения и обновляет DOM при каждом изменении состояния.

Как это работает

Когда вы присваиваете значение реактивной переменной, Vue запускает процесс обновления:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const count = ref(0);

    onMounted(() => {
      // Присваивание 1 - перерисовка #1
      data.value = { name: 'Иван', age: 30 };
      
      // Присваивание 2 - перерисовка #2
      count.value = 1;
      
      // Присваивание 3 - перерисовка #3
      data.value = { ...data.value, email: 'ivan@example.com' };
    });

    return { data, count };
  }
};

В этом примере произойдет 3 отдельные перерисовки (реконсиляции).

Почему это происходит?

Вue использует reactive system (реактивную систему), которая отслеживает изменения через Proxy:

const data = ref({ count: 0 });

// При присваивании Vue срабатывает setter
data.value = { count: 1 }; // Срабатывает обновление

Возможна ли оптимизация? Да! Используй batching или watchEffect.

Решение 1: Использование nextTick для батчинга

import { ref, onMounted, nextTick } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const count = ref(0);
    const name = ref('');

    onMounted(async () => {
      // Изменяем несколько переменных синхронно
      data.value = { name: 'Иван' };
      count.value = 1;
      name.value = 'Test';
      
      // nextTick дождется, пока Vue выполнит одну перерисовку
      await nextTick();
      
      // Теперь все изменения применены в один batch
      console.log('Перерисовка выполнена один раз');
    });

    return { data, count, name };
  }
};

Решение 2: Создавай объект один раз

Вместо нескольких присваиваний создай объект, а потом присвой его один раз:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const count = ref(0);

    onMounted(() => {
      // Плохо - несколько перерисовок
      // data.value = { name: 'Иван' };
      // data.value = { ...data.value, age: 30 };
      // data.value = { ...data.value, email: 'ivan@example.com' };

      // Хорошо - одна перерисовка
      const userData = {
        name: 'Иван',
        age: 30,
        email: 'ivan@example.com'
      };
      data.value = userData;
      count.value = 1;
    });

    return { data, count };
  }
};

Решение 3: Используй reactive для объектов

import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      data: null,
      count: 0,
      name: ''
    });

    onMounted(() => {
      // Каждое присваивание всё равно вызовет обновление
      state.data = { name: 'Иван' }; // Обновление 1
      state.count = 1; // Обновление 2
      state.name = 'Test'; // Обновление 3
    });

    return { state };
  }
};

Решение 4: Используй watchEffect для управления обновлениями

import { ref, watchEffect, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const count = ref(0);

    onMounted(() => {
      // Синхронно устанавливаем значения без перерисовки
      let tempData = null;
      let tempCount = 0;

      // Загружаем данные
      tempData = { name: 'Иван', age: 30 };
      tempCount = 1;

      // Одна перерисовка - присваиваем один раз
      data.value = tempData;
      count.value = tempCount;
    });

    return { data, count };
  }
};

Options API vs Composition API

Options API (mounted)

export default {
  data() {
    return {
      data: null,
      count: 0
    };
  },
  mounted() {
    this.data = { name: 'Иван' }; // Обновление 1
    this.count = 1; // Обновление 2
    // Всё равно 2 перерисовки
  }
};

Composition API (onMounted)

export default {
  setup() {
    const data = ref(null);
    const count = ref(0);

    onMounted(() => {
      data.value = { name: 'Иван' }; // Обновление 1
      count.value = 1; // Обновление 2
      // Всё равно 2 перерисовки
    });

    return { data, count };
  }
};

Измерение производительности

Для проверки количества перерисовок используй Vue DevTools:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const count = ref(0);

    onMounted(() => {
      console.time('mount');
      
      data.value = { name: 'Иван' };
      count.value = 1;
      
      console.timeEnd('mount');
    });

    return { data, count };
  }
};

Является ли это проблемой?

Для большинства приложений - НЕТ. Vue эффективно оптимизирует перерисовки благодаря Virtual DOM:

1. Vue создает новый Virtual DOM
2. Сравнивает с предыдущим (diffing)
3. Обновляет только измененные части в реальном DOM

Перерисовка обычно быстра, если:

• Компонент небольшой
• Нет сложной логики в шаблоне
• Нет больших списков

Когда это может быть проблемой

onMounted(() => {
  // Проблема: 1000 перерисовок
  for (let i = 0; i < 1000; i++) {
    items.value.push({ id: i }); // Каждая push - обновление
  }
});

// Решение:
onMounted(() => {
  const newItems = [];
  for (let i = 0; i < 1000; i++) {
    newItems.push({ id: i });
  }
  items.value = newItems; // Одно обновление
});

Заключение

Да, каждое присваивание в mounted вызывает перерисовку. Однако это редко является проблемой производительности благодаря Virtual DOM.

Для оптимизации:

1. Создавай объекты один раз и присваивай один раз
2. Используй nextTick если нужно контролировать момент обновления
3. Для больших наборов данных - используй lazy loading
4. Профилируй код с Vue DevTools, прежде чем оптимизировать