HASS自定义卡片切换Lovelace视图后仍触发渲染及定时器清理问题

你遇到的是LitElement类HASS自定义卡片非常常见的生命周期管理问题，核心逻辑是框架不会自动帮你清理手动创建的定时器这类外部副作用，必须在元素和DOM解绑的时候主动回收资源，具体原因和改法如下：

问题根因 #

1. 你把setInterval写在构造函数里，既没有存定时器的返回ID，也没有在元素从页面移除的时候做清理：只要这个定时器的闭包还持有类实例的引用，哪怕卡片已经切到其他视图不显示了，定时器依然会每秒触发，修改内部的date属性，触发Lit的组件更新流程，连带执行render方法，所以你写在render里的控制台日志会一直输出。
2. 常规Lovelace切换视图的逻辑是：非当前视图的卡片会直接从DOM树中移除，触发Web Component标准的disconnectedCallback生命周期；只有你手动给视图开了缓存配置的场景下，元素才会被保留在DOM里只是隐藏，这种情况可以额外加可见性判断做兜底。

具体修改步骤 #

• 首先在类里加一个私有属性存定时器ID，方便后续清理：

export class BoilerplateCard extends LitElement {
  // 新增这行
  private _timerId: number | undefined;
  // ... 其他原有属性、配置

• 删掉构造函数里的定时器逻辑，把定时器启动逻辑移到connectedCallback（元素每次挂载到DOM时触发）：

// 删掉原来constructor里的setInterval代码，改成这样
connectedCallback() {
  super.connectedCallback();
  // 避免重复创建多个定时器
  if (this._timerId) clearInterval(this._timerId);
  this._timerId = window.setInterval(() => {
    this.date = new Date();
  }, 1000);
}

• 新增disconnectedCallback（元素每次从DOM移除时触发），在里面清理定时器：

disconnectedCallback() {
  super.disconnectedCallback();
  if (this._timerId) {
    clearInterval(this._timerId);
    this._timerId = undefined;
  }
}

• 额外修正你现有的更新判断逻辑：你现在的shouldUpdate用了hasConfigOrEntityChanged做性能优化，但这个函数只会检测配置、关联实体的变化，不会识别你内部维护的date属性变更，会导致正常显示时时钟不更新。改成下面的逻辑，允许date变更触发更新：

protected shouldUpdate(changedProps: PropertyValues): boolean {
  // 配置/实体变化触发更新，或者时钟date变化也触发更新
  return hasConfigOrEntityChanged(this, changedProps, true) || changedProps.has('date');
}

额外兜底（仅当开了Lovelace视图缓存时需要） #

如果你的Lovelace配置里给视图开了cached: true，切视图时卡片不会被从DOM移除，只是被隐藏，这时候可以在定时器的回调里加可见性判断，不可见时就不更新date，减少不必要的性能消耗：

this._timerId = window.setInterval(() => {
  // 元素不可见时不更新
  if (this.offsetParent === null && this.clientWidth === 0) return;
  this.date = new Date();
}, 1000);

补充说明 #

LitElement没有内置的"组件销毁"钩子，因为Web Component标准本身就没有强制的销毁流程：元素实例从DOM移除后依然可能被重新挂载回去，所以用connectedCallback启动副作用、disconnectedCallback清理副作用是最通用、最贴合标准的做法。所有手动创建的定时器、事件监听器、订阅连接，都必须在disconnectedCallback里对应清理，不然就会出现内存泄漏、后台一直跑逻辑的问题。

内容的提问来源于stack exchange，提问作者d2kagw