Composition API и onMounted, onUnmounted

Composition API — современный подход к организации логики компонентов во Vue.js. Он позволяет структурировать код вокруг функций и реактивных данных, упрощая повторное использование логики между компонентами. Основной единицей является функция setup(), которая вызывается при инициализации компонента.

import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    const count = ref(0); // реактивная переменная
    const state = reactive({ name: 'Vue', version: 3 });

    const doubledCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return { count, state, doubledCount, increment };
  }
};

Ключевые моменты Composition API:

  • ref() создаёт реактивное примитивное значение.
  • reactive() делает реактивным объект с несколькими свойствами.
  • computed() создаёт вычисляемое свойство, которое автоматически обновляется при изменении зависимостей.
  • Любые функции, возвращённые из setup(), становятся доступными в шаблоне.

Жизненный цикл компонентов

Composition API предоставляет функции для управления жизненным циклом компонента, заменяя методы created, mounted, unmounted и другие.

onMounted

Функция onMounted вызывается один раз после того, как компонент был вставлен в DOM. Она используется для выполнения действий, которые требуют наличия DOM-элементов, таких как инициализация плагинов, получение данных с сервера или установка подписок на события.

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    onMounted(() => {
      message.value = 'Компонент смонтирован';
      console.log('DOM готов для работы');
    });

    return { message };
  }
};

Особенности onMounted:

  • Выполняется только после полной вставки DOM.
  • Можно регистрировать несколько функций, все будут вызваны при монтировании.
  • Отлично подходит для асинхронных операций и сторонних библиотек.

onUnmounted

Функция onUnmounted срабатывает один раз при удалении компонента из DOM. Её используют для очистки ресурсов, отмены подписок, таймеров или событий, чтобы предотвратить утечки памяти.

import { onUnmounted } from 'vue';

export default {
  setup() {
    const intervalId = setInterval(() => {
      console.log('Работает таймер');
    }, 1000);

    onUnmounted(() => {
      clearInterval(intervalId);
      console.log('Компонент размонтирован, таймер остановлен');
    });
  }
};

Особенности onUnmounted:

  • Подходит для очистки любых сторонних ресурсов.
  • Можно регистрировать несколько функций, они будут вызваны при размонтировании.
  • Совместно с onMounted позволяет безопасно управлять жизненным циклом компонентов.

Практическое применение

Асинхронная загрузка данных

Использование onMounted для получения данных после рендеринга компонента обеспечивает корректное отображение и предотвращает ошибки доступа к DOM.

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

export default {
  setup() {
    const users = ref([]);
    const loading = ref(true);

    onMounted(async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
      } finally {
        loading.value = false;
      }
    });

    return { users, loading };
  }
};

Управление событиями

onMounted и onUnmounted часто используются вместе для установки и удаления глобальных обработчиков событий.

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

export default {
  setup() {
    const windowWidth = ref(window.innerWidth);

    function handleResize() {
      windowWidth.value = window.innerWidth;
    }

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    return { windowWidth };
  }
};

Такой подход гарантирует, что события не будут накапливаться и не приведут к утечкам памяти при многократном монтировании и размонтировании компонента.

Сочетание Composition API и реактивных данных

Composition API позволяет эффективно объединять реактивные состояния с жизненным циклом компонентов. Функции ref, reactive и computed взаимодействуют с onMounted и onUnmounted для построения устойчивой и масштабируемой логики:

  • Инициализация данных после рендеринга — onMounted.
  • Очистка ресурсов и подписок — onUnmounted.
  • Создание реактивных состояний и вычисляемых свойств — ref, reactive, computed.

Этот подход делает код компонентов Vue.js более структурированным, повторно используемым и безопасным.

Оглавление