LitElement如何从无默认值的Properties初始化内部State状态

API 探路者

2026-9-24

问题根因

你遇到的报错本质是类字段初始化时机早于外部property赋值时机：
类字段的赋值逻辑会被编译到构造函数中执行，此时Lit还没完成外部传入属性的初始化，没有默认值的total还是undefined，undefined / 10得到NaN，因此_numPages初始值为NaN，后续用它生成数组就会抛出RangeError。
而render函数是Lit完成所有属性初始化、首次更新调度后才执行的，此时total已经拿到了传入的有效值，所以render内部计算的numPages可以正常运行。

正确实现模式

场景1：计算逻辑简单（优先推荐）

如果状态的计算开销很低（比如你这个分页总页数计算），不需要额外缓存，直接用计算属性（getter）即可，天然响应依赖属性变化，不需要额外维护state：

// 去掉@state()装饰的_numPages字段，新增如下getter
get _numPages() {
  // 加兜底避免total未传入时出现NaN
  return Math.ceil((this.total || 0) / this.pageSize);
}

场景2：计算开销高，需要缓存为内部state

如果符合「属性转内部状态开销较高」的场景，就通过willUpdate生命周期监听依赖属性的变化，主动更新内部state：

import { willUpdate } from 'lit';

export class Pagination extends BaseElement {
  // ...其余原有属性声明保留
  @state()
  _numPages = 0; // 先给默认兜底值

  override willUpdate(changedProperties) {
    // 当依赖的total或pageSize变化时，重新计算内部状态
    if (changedProperties.has('total') || changedProperties.has('pageSize')) {
      this._numPages = Math.ceil((this.total || 0) / this.pageSize);
    }
    // 如需同步selected到内部_selected也可以按相同逻辑处理
    if (changedProperties.has('selected')) {
      this._selected = this.selected;
    }
  }
}