3、Web Components：属性观察、数据处理与生命周期管理

最新推荐文章于 2025-10-13 05:39:42 发布

day7

最新推荐文章于 2025-10-13 05:39:42 发布

阅读量44

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript构建Web组件文章标签： Web Components 属性观察数据处理

本文链接：https://blog.youkuaiyun.com/day7/article/details/151137930

TypeScript构建Web组件专栏收录该内容

16 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

Web Components：属性观察、数据处理与生命周期管理

1. 属性观察

在当前 <time-format> 的实现中，元素渲染后，属性的进一步更改不会产生任何效果，这对于 HTML 元素来说有些奇怪。通常，当我们更改属性（如锚元素的 href ）时，期望更改能立即可见，各种效果和动画都需要这种行为。

我们可以通过在 observedAttributes() 方法中提供属性列表来观察属性。该方法是静态的，因为它是元素所有实例的全局定义。对于这些观察的属性，当它们被修改时， attributeChangedCallback 方法会被调用。出于性能原因，它不会触发其他属性。

以下是一个新的 <time-format> 版本，当属性更改时会自动更新：

class TimeFormat extends HTMLElement {
  render() {
    let date = new Date(this.getAttribute('datetime')
                || Date.now());
    this.innerHTML = new Intl.DateTimeFormat("default", {
      year: this.getAttribute('year') || undefined,
      month: this.getAttribute('month') ||