Install и uninstall хуки

В Quasar Framework хуки представляют собой специальные функции, которые позволяют интегрировать собственную логику в жизненный цикл компонентов или приложения. Работа с хуками требует понимания точек подключения и правильного использования методов install и uninstall.

Основные концепции хуков

Хук — это объект или функция, которая может регистрироваться в приложении или компоненте и выполнять действия на определённые события. В Quasar хуки обычно используются для:

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

Хук может быть глобальным (действовать на всё приложение) или локальным (действовать только на конкретный компонент).

Метод install

Метод install отвечает за подключение хука и активацию его логики. Он вызывается один раз при регистрации и может использовать параметры для конфигурации.

Пример структуры хука:

export default {
  name: 'exampleHook',
  install(app, options) {
    // Подключение логики
    app.config.globalProperties.$example = () => {
      console.log('Хук установлен');
    }

    // Реакция на события жизненного цикла компонента
    app.mixin({
      mounted() {
        console.log('Компонент смонтирован');
      }
    });
  }
}

Ключевые моменты метода install:

  • Получает объект приложения app и опциональные параметры options.
  • Позволяет регистрировать глобальные свойства и миксины.
  • Может добавлять обработчики событий или подписки на реактивные данные.
  • Вызывается только один раз при регистрации хука через app.use().

Метод uninstall

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

Пример метода uninstall:

export default {
  name: 'exampleHook',
  uninstall(app) {
    // Удаление глобальных свойств
    delete app.config.globalProperties.$example;

    // Удаление миксинов или подписок
    // Важно хранить ссылки на добавленные обработчики для корректного удаления
  }
}

Особенности использования uninstall:

  • Вызывается при явном отключении хука или демонтировании модуля.
  • Должен корректно очищать все добавленные глобальные свойства, подписки и слушатели событий.
  • Предотвращает утечки памяти и конфликт с другими хуками.

Регистрация и удаление хуков

Для подключения хука используется метод app.use():

import exampleHook from './exampleHook'

const app = createApp(App)
app.use(exampleHook, { option1: true })

Для удаления хука требуется реализовать отдельную логику, так как Quasar не предоставляет встроенного метода app.unuse(). Удаление обычно выполняется через вызов метода uninstall внутри вашего хука:

exampleHook.uninstall(app)

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

  1. Глобальный трекер событий Хук подключает обработчики кликов и скролла для всех компонентов:
export default {
  install(app) {
    const handleClick = () => console.log('Клик зафиксирован')
    window.addEventListener('click', handleClick)
    
    app.config.globalProperties.$removeTracker = () => {
      window.removeEventListener('click', handleClick)
    }
  },
  uninstall(app) {
    app.config.globalProperties.$removeTracker()
  }
}
  1. Динамическая тема Хук может автоматически менять тему приложения:
export default {
  install(app, { theme }) {
    app.config.globalProperties.$setTheme = () => {
      document.body.setAttribute('data-theme', theme)
    }
    app.config.globalProperties.$setTheme()
  },
  uninstall(app) {
    document.body.removeAttribute('data-theme')
  }
}

Рекомендации по написанию хуков

  • Хранить ссылки на все добавленные слушатели и таймеры для корректного удаления.
  • Использовать app.config.globalProperties для глобальных функций и данных.
  • Ограничивать влияние хука локальными компонентами, если глобальное подключение не требуется.
  • Следить за совместимостью с другими хуками и сторонними библиотеками.

Методы install и uninstall в Quasar позволяют создавать гибкую, управляемую архитектуру расширений, обеспечивая корректное подключение и безопасное отключение функциональности без утечек ресурсов.

Оглавление