前言
Web Components 是一种可以创建可复用、封装良好的 HTML 标签的技术，它使得我们可以像使用原生 HTML 标签一样使用自定义组件。在 Web Components 中，生命周期方法是关键，它们定义了组件在不同阶段的行为。下面我们就来详细讲解下 Web Components 的生命周期方法、触发时机以及它们的使用场景。
主要生命周期方法
Web Components 的生命周期方法主要包括以下几个：
- constructor(): 构造函数，在组件实例化时调用。
- connectedCallback(): 当组件被添加到 DOM 中时调用。
- disconnectedCallback(): 当组件从 DOM 中移除时调用。
- attributeChangedCallback(name, oldValue, newValue): 当组件的属性发生变化时调用。
- adoptedCallback(): 当组件被移动到新的文档中时调用。
1. constructor()
触发时机:
构造函数在组件实例化时被调用。它通常用于初始化组件的状态或设置默认值。
使用场景:
class MyComponent extends HTMLElement {constructor() {super();this.attachShadow({ mode: 'open' });}
}
customElements.define('my-component', MyComponent);
这里，constructor() 用于创建一个 shadow DOM，使组件的样式封装在内部，不影响外部样式。
2. connectedCallback()
触发时机:
当组件被添加到 DOM 中时触发。通常用于执行一些与 DOM 相关的初始化工作，比如渲染内容或注册事件监听。
使用场景:
class MyComponent extends HTMLElement {connectedCallback() {this.shadowRoot.innerHTML = `<p>Hello, World!</p>`;}
}
customElements.define('my-component', MyComponent);
在这个例子中，connectedCallback() 被用来向 shadow DOM 插入 HTML 内容。
3. disconnectedCallback()
触发时机:
当组件从 DOM 中移除时触发。它通常用于清理定时器或取消事件监听，以防止内存泄漏。
使用场景:
class MyComponent extends HTMLElement {connectedCallback() {this.timer = setInterval(() => console.log('Tick'), 1000);}disconnectedCallback() {clearInterval(this.timer);}
}
customElements.define('my-component', MyComponent);
在这里，disconnectedCallback() 用于清理定时器，确保在组件移除之后不会继续触发 setInterval。
4. attributeChangedCallback(name, oldValue, newValue)
触发时机:
当组件的属性发生变化时触发。可以用来响应属性的变化，并根据新值更新组件的状态或外观。
使用场景:
class MyComponent extends HTMLElement {static get observedAttributes() {return ['data-value'];}attributeChangedCallback(name, oldValue, newValue) {if (name === 'data-value') {console.log(`Attribute changed from ${oldValue} to ${newValue}`);}}
}
customElements.define('my-component', MyComponent);
这里，attributeChangedCallback() 用来响应 data-value 属性的变化。
5. adoptedCallback()
触发时机:
当组件被移动到新的文档时触发（例如通过 document.adoptNode() 方法）。此方法比较少用，但在某些特殊场景下非常有用。
使用场景:
class MyComponent extends HTMLElement {adoptedCallback() {console.log('Component adopted into new document');}
}
customElements.define('my-component', MyComponent);
这在跨文档操作中很有用，比如将组件从一个页面移动到另一个页面。
应用场景
构建一个动态表单组件
假设我们需要构建一个动态表单组件，当用户添加或移除表单字段时，组件可以自动更新。我们可以利用 Web Components 的生命周期方法来实现这一需求。
class DynamicForm extends HTMLElement {constructor() {super();this.attachShadow({ mode: 'open' });this.shadowRoot.innerHTML = `<form id="dynamicForm"><button id="addField">Add Field</button><button id="removeField">Remove Field</button><div id="fields"></div></form>`;}connectedCallback() {this.shadowRoot.getElementById('addField').addEventListener('click', this.addField.bind(this));this.shadowRoot.getElementById('removeField').addEventListener('click', this.removeField.bind(this));}disconnectedCallback() {this.shadowRoot.getElementById('addField').removeEventListener('click', this.addField.bind(this));this.shadowRoot.getElementById('removeField').removeEventListener('click', this.removeField.bind(this));}addField(event) {event.preventDefault();const fieldsContainer = this.shadowRoot.getElementById('fields');const field = document.createElement('input');field.type = 'text';fieldsContainer.appendChild(field);}removeField(event) {event.preventDefault();const fieldsContainer = this.shadowRoot.getElementById('fields');if (fieldsContainer.lastChild) {fieldsContainer.removeChild(fieldsContainer.lastChild);}}
}customElements.define('dynamic-form', DynamicForm);
在这个示例中，我们使用 connectedCallback 方法注册按钮的点击事件来动态添加和删除表单字段，并通过 disconnectedCallback 方法在组件从 DOM 移除时取消事件监听，防止内存泄漏。
响应属性变化的图表组件
假设我们需要一个可以动态更新的图表组件，当数据属性变化时自动重新渲染图表。我们可以利用 attributeChangedCallback 方法来实现。
class DynamicChart extends HTMLElement {static get observedAttributes() {return ['data'];}constructor() {super();this.attachShadow({ mode: 'open' });this.shadowRoot.innerHTML = `<canvas id="chartCanvas"></canvas>`;}connectedCallback() {this.renderChart();}attributeChangedCallback(name, oldValue, newValue) {if (name === 'data' && oldValue !== newValue) {this.renderChart();}}renderChart() {const data = JSON.parse(this.getAttribute('data') || '[]');const ctx = this.shadowRoot.getElementById('chartCanvas').getContext('2d');new Chart(ctx, {type: 'line',data: {labels: data.map(item => item.label),datasets: [{data: data.map(item => item.value),borderColor: 'rgba(75, 192, 192, 1)',borderWidth: 1}]}});}
}customElements.define('dynamic-chart', DynamicChart);
在这个示例中，我们定义了一个观察 data 属性的图表组件，当 data 属性发生变化时，组件会自动重新渲染图表。attributeChangedCallback 方法确保了每次数据更新时，图表都会被重新绘制。
总结
Web Components 提供了一套功能强大的生命周期方法，使开发者可以精细地控制自定义组件的行为和状态。通过正确地使用这些方法，我们可以创建出功能丰富、性能优越且易于维护的 Web 组件。掌握 Web Components 的生命周期方法不仅有助于提升组件的质量和性能，还能显著提高开发效率和代码复用性。
