Методы slimCreated, slimConnected, slimDisconnected

В библиотеке Slim.js жизненный цикл компонента контролируется набором специальных методов, которые позволяют выполнять действия на разных этапах существования элемента. Три ключевых метода — slimCreated, slimConnected и slimDisconnected — обеспечивают полный контроль над инициализацией, подключением к DOM и очисткой компонента.

slimCreated

Метод slimCreated вызывается один раз при создании экземпляра компонента. На этом этапе элемент уже сконструирован, но ещё не добавлен в DOM. Основное назначение метода — подготовка внутреннего состояния компонента, создание начальных данных и связывание методов с контекстом.

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

  • Вызывается только один раз за весь жизненный цикл компонента.
  • Доступен доступ к полям и методам компонента, но DOM-узлы ещё могут быть не полностью доступны.
  • Подходит для инициализации свойств, массивов, объектов состояния и привязки событий, которые не зависят от присутствия элемента в DOM.

Пример использования:

class MyComponent extends Slim {
  static get useShadow() { return true; }

  constructor() {
    super();
    this.count = 0;
  }

  slimCreated() {
    this.items = [];
    this.message = "Компонент создан";
  }
}
customElements.define('my-component', MyComponent);

В этом примере создаётся массив items и строковое свойство message. Эти данные будут доступны в дальнейшем в методах жизненного цикла и шаблоне.

slimConnected

Метод slimConnected вызывается каждый раз, когда компонент добавляется в DOM. Это момент, когда элемент становится видимым на странице, и можно безопасно работать с реальными DOM-узлами и внешними библиотеками.

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

  • Вызывается каждый раз, когда элемент подключается к дереву DOM.

  • Доступен полный DOM элемента, включая его Shadow DOM (если используется).

  • Идеально подходит для:

    • подписки на события браузера или глобальные события;
    • запуска анимаций;
    • асинхронных запросов, зависящих от DOM;
    • работы с внешними библиотеками, которые требуют наличия элемента в документе.

Пример использования:

slimConnected() {
  this.timer = setInterval(() => {
    this.count++;
    this.update();
  }, 1000);
  console.log("Компонент подключён к DOM");
}

В этом примере запускается таймер, увеличивающий счётчик каждую секунду. Таймер создаётся только после подключения компонента к DOM, что предотвращает лишние вычисления до момента отображения.

slimDisconnected

Метод slimDisconnected вызывается при удалении компонента из DOM. Этот этап жизненного цикла важен для освобождения ресурсов, отписки от событий и остановки процессов, чтобы предотвратить утечки памяти.

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

  • Вызывается каждый раз, когда элемент удаляется из DOM.
  • Позволяет корректно останавливать таймеры, отменять подписки и освобождать ресурсы.
  • Рекомендуется использовать совместно с slimConnected для симметричного управления ресурсами.

Пример использования:

slimDisconnected() {
  clearInterval(this.timer);
  console.log("Компонент отключён от DOM");
}

Здесь таймер, созданный в slimConnected, останавливается при удалении элемента. Это предотвращает продолжение выполнения кода для компонента, который больше не существует на странице.

Взаимодействие методов

Жизненный цикл компонента в Slim.js можно представить как последовательность:

  1. Создание компонента: вызывается slimCreated.
  2. Подключение к DOM: вызывается slimConnected.
  3. Отключение от DOM: вызывается slimDisconnected.
  4. Повторное подключение к DOM (при необходимости): снова вызывается slimConnected.

Пример комплексного использования:

class TimerComponent extends Slim {
  static get useShadow() { return true; }

  slimCreated() {
    this.count = 0;
    this.message = "Начало отсчёта";
  }

  slimConnected() {
    this.timer = setInterval(() => {
      this.count++;
      this.update();
    }, 1000);
  }

  slimDisconnected() {
    clearInterval(this.timer);
  }
}

customElements.define('timer-component', TimerComponent);

Такой подход обеспечивает:

  • безопасную инициализацию данных;
  • корректное использование DOM только после подключения;
  • освобождение ресурсов при удалении компонента.

Рекомендации по использованию

  • Любые инициализационные данные и свойства определять в slimCreated.
  • Любые взаимодействия с DOM или сторонними библиотеками вызывать в slimConnected.
  • Всегда очищать таймеры, подписки и другие ресурсы в slimDisconnected.
  • Использовать эти методы совместно для предотвращения утечек памяти и некорректного поведения компонентов.

Эти три метода формируют основу управления жизненным циклом в Slim.js и являются ключевыми для создания производительных и надёжных компонентов.

Оглавление