Методы жизненного цикла веб-компонента

Методы жизненного цикла веб-компонента

Когда браузер разбирает и отображает ваш веб-компонент в DOM, есть несколько функций обратного вызова жизненного цикла, выполняющихся в разное время.

• Метод constructor() выполняется при создании элемента, прежде чем он будет внедрён в пользовательский интерфейс.
• Метод connectedCallback() выполняется, когда элемент внедряется в DOM, и снова, когда он перемещается или добавляется в другое место.
• Метод disconnectedCallback() выполняется каждый раз, когда элемент удаляется из DOM.
• Метод attributeChangedCallback() выполняется каждый раз, когда в элементе изменяется зарегистрированный атрибут.

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

Методы connectedCallback() и disconnectedCallback()

Метод connectedCallback() выполняется, когда элемент внедряется или загружается в DOM, и снова, когда он перемещается или добавляется в другое место.

Метод disconnectedCallback() выполняется всякий раз, когда элемент удаляется из DOM.

/**
 * Метод выполняется, когда элемент подключается к DOM
 */
connectedCallback () {
  console.log('connected 🎉', this);
}

/**
 * Метод выполняется, когда элемент отсоединяется от DOM
 */
disconnectedCallback () {
  console.log('disconnected 😢', this);
}

Если добавить веб-компонент в пользовательский интерфейс и больше ничего не предпринимать на странице, будет запущен метод constructor(), а затем connectedCallback().

Если переместить элемент с помощью метода Element.append(), будет запущена функция disconnectedCallback(), а затем функция connectedCallback().

Если его удалить с помощью метода Element.remove(), будет запущена только функция disconnectedCallback().

let count = document.querySelector('wc-count');

// Логи консоли...
// "disconnected 😢" <wc-count></wc-count>
// "connected 🎉" <wc-count></wc-count>
document.body.append(count);

// Логи консоли...
// "disconnected 😢" <wc-count></wc-count>
count.remove();

В этом примере данные выводятся в консоль. Можно включить панель Инспектор и перейти во вкладку консоль и увидеть результат выполнения скрипта там. Или перейти на сайт CodePen с этим примером.

See the Pen

В каких случаях используются эти методы

Как мы вчера узнали, метод connectedCallback() может быть полезен, когда компонент может быть инстанцирован несколькими разными способами.

Они также необходимы, если элементы изменяются за пределами вашего элемента во время загрузки веб-компонента.

/**
 * Метод выполняется, когда элемент подключается к DOM
 */
connectedCallback () {
  document.body.addEventListener('click', this);
}

/**
 * Метод выполняется, когда элемент отсоединяется от DOM
 */
disconnectedCallback () {
  document.body.removeEventListener('click', this);
}

Исторически, множество статей советуют запускать все задачи по настройке внутри метода connectedCallback() и удалять такие вещи, как слушатель событий, в методе disconnectedCallback().

Но в случае слушателей событий, находящихся внутри веб-компонента и его дочерних элементов, они всё равно собираются сборщиком мусора после удаления элемента, так что в этом нет необходимости.

Что насчёт атрибутов

Позже мы рассмотрим метод attributeChangedCallback(): что это такое, как он работает и как его использовать.

Все статьи серии о Веб-Компонентах/Web Component

• Ваш первый веб-компонент
• Добавление опций в веб-компонент
• Улучшение веб-компонента
• Различные способы инстанцирования веб-компонента
• Методы жизненного цикла веб-компонента
• Как обнаружить изменение атрибутов веб-компонента
• Как заставить веб-компоненты общаться (часть 1)
• Как заставить веб-компоненты общаться (часть 2)