Жизненный цикл компонента
📅
Основные методы жизненного цикла
connectedCallback()
Вызывается при добавлении элемента в DOM:
class LifecycleComponent extends HTMLElement {
connectedCallback() {
console.log('Элемент добавлен в DOM!');
this.innerHTML = '<p>Компонент инициализирован</p>';
this.addEventListener('click', this.handleClick);
}
handleClick() {
console.log('Клик по компоненту');
}
}
disconnectedCallback()
Вызывается при удалении элемента из DOM:
disconnectedCallback() {
console.log('Элемент удалён из DOM!');
this.removeEventListener('click', this.handleClick);
// Очистка таймеров, подписок, соединений
}
attributeChangedCallback()
Реагирует на изменения атрибутов:
static get observedAttributes() {
return ['name', 'age', 'status']; // Отслеживаемые атрибуты
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Атрибут ${name} изменился: ${oldValue} → ${newValue}`);
if (name === 'name') {
this.updateName(newValue);
}
}
Полный пример компонента
class UserProfile extends HTMLElement {
static get observedAttributes() {
return ['name', 'avatar'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
this.setupEventListeners();
}
disconnectedCallback() {
this.cleanupEventListeners();
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}
render() {
this.shadowRoot.innerHTML = `
<div class="profile">
<img src="${this.getAttribute('avatar') || 'default.jpg'}">
<h3>${this.getAttribute('name') || 'Без имени'}</h3>
</div>
`;
}
setupEventListeners() {
this.clickHandler = this.handleClick.bind(this);
this.shadowRoot.addEventListener('click', this.clickHandler);
}
cleanupEventListeners() {
this.shadowRoot.removeEventListener('click', this.clickHandler);
}
handleClick() {
this.dispatchEvent(new CustomEvent('profile-click', {
bubbles: true,
detail: { userId: this.getAttribute('id') }
}));
}
}
customElements.define('user-profile', UserProfile);
Важные особенности
Порядок вызовов
constructor()— создание экземпляраattributeChangedCallback()— если есть атрибуты при созданииconnectedCallback()— при вставке в DOM
Особенности работы
connectedCallbackможет вызываться несколько раз при перемещении элементаdisconnectedCallbackне вызывается при закрытии страницыattributeChangedCallbackработает только для атрибутов изobservedAttributes
Best Practices
- Не вызывайте
connectedCallbackв конструкторе — элемент ещё не в DOM - Всегда очищайте ресурсы в
disconnectedCallback - Оптимизируйте рендеринг в
attributeChangedCallback - Используйте
observedAttributesдля отслеживания нужных атрибутов