组合式组件应以可复用行为抽离为独立类为核心，通过基类统一生命周期与DOM管理，能力类按需组合、职责单一，私有字段+访问器约束状态，对外提供安全接口。
用 class 语法写组合式组件，关键不是堆砌功能，而是让组件能自然拼装、职责清晰、状态可控。核心在于把“可复用的行为”抽成独立类，再通过继承、组合或实例挂载的方式协同工作，而不是靠 props 层层透传或逻辑混杂在 render 里。
用基类统一生命周期与 DOM 管理
定义一个轻量 Component 基类，封装通用能力：创建元素、挂载/卸载、更新触发、事件自动解绑。子类只专注业务逻辑，不重复写 document.createElement 或 addEventListener。
- 提供
render()返回 DOM 片段或字符串，mount(el)插入目标容器 -
update(props)触发重新渲染，支持浅对比避免无效更新 - 内部用
WeakMap存储事件监听器，在unmount()时批量移除，防内存泄漏
把行为拆成可插拔的能力类
不依赖继承深度，改用“能力组合”——比如一个搜索框组件，不需要继承 FormComponent 再继承 InputComponent，而是直接实例化并持有 DebounceHandler、Validator、ApiCaller 等独立类。
- 每个能力类职责单一：如
DebounceHandler只管延迟执行，暴露trigger(fn, delay) - 在主组件构造时注入，便于测试替换（例如用 mock 的
ApiCaller） - 通过
this.debouncer.trigger(() => this.fetch(), 300)调用，语义清晰、解耦明确
用私有字段 + 访问器约束状态变更
避免外部随意修改内部状态导致视图不一致。用 # 私有字段锁住关键数据，配合 get/set 做校验和副作用触发。
- 例如
#value = ''+set value(v) { if (typeof v === 'string') { this.#value = v; this.emit('change'); } } - 状态变更自动通知订阅者，或触发
update()，不用手动调用刷新 - 对外只暴露安全接口（如
setValue()），隐藏实现细节
按需组合，而非强制继承树
遇到需要多个能力的场景（如带权限控制的弹窗 + 动画效果 + 表单校验），不要建 AuthAnimatedValidatedModal 这种超长名类，而是让主类持有一组策略实例：
this.auth = new AuthGuard({ required: 'editor' })this.animator = new FadeAnimator()this.form = new FormController(schema)- 在
show()中依次调用this.auth.check().then(() => this.animator.in().then(() => this.render()))
这样新增动画类型、换鉴权方式，都不影响其他部分，也方便单元测试各环节。
