数据驱动不是让页面动起来，而是让“谁动、何时动、怎么动”可预测、可追溯、可测试；Custom Element需用observedAttributes+attributeChangedCallback监听HTML属性，或用Proxy/Object.defineProperty监听JS属性，并在render()中仅操作shadowRoot实现可控更新。
原生 HTML 本身不支持数据驱动视图，所谓“数据驱动渲染”必须靠手动补足响应逻辑或引入规范机制——否则你写的只是静态模板，不是可响应的数据视图。
Custom Element 中如何实现数据驱动更新
原生自定义元素（customElements.define）默认不感知属性或内部数据变化，attributeChangedCallback 只响应 HTML 属性变更，且只接收字符串值；它不会自动触发重渲染，也不会监听 JS 属性（如 this.count）变化。
- 必须显式声明
observedAttributes，拼写错误或遗漏会导致回调完全不执行 - 首次挂载时已存在的属性，
attributeChangedCallback不会触发，需在connectedCallback中手动同步一次 - 若要响应 JS 属性变化，得自己用
Object.defineProperty或Proxy封装 setter，并在其中调用this.render() -
render()方法应只操作this.shadowRoot，避免直接修改this.innerHTML（会丢失事件绑定和状态）
示例片段：
class DataButton extends HTMLElement {
static get observedAttributes() { return ['label', 'count']; }
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
attributeChangedCallback(name, _, newValue) {
if (name === 'count') this._count = Number(newValue);
this.render();
}
render() {
this.shadowRoot.innerHTML = `
<button>${this.getAttribute('label') || 'Click'}: ${this._count || 0}</button>
`;
}
}
customElements.define('data-button', DataButton);
为什么直接用 innerHTML + JSON 数据不等于数据驱动
常见误区：把 JSON 数据 JSON.stringify 后塞进 innerHTML，再用 setInterval 定时重写——这看起来“动”了，但本质是暴力 DOM 替换，没有依赖追踪、无差分更新、无法复用节点、事件监听器频繁丢失。
- 每次重写
innerHTML都会销毁并重建所有子节点，input的焦点、滚动位置、动画状态全丢 - 没有响应式依赖，数据改了但没调用渲染函数，UI 就卡在旧状态
- 无法做局部更新：哪怕只改一个数字，整个容器都被重绘
- 调试困难：你不知道哪次数据变更该触发哪块 UI，也没有生命周期钩子可打断点
Web Components + 简单响应式库的轻量组合方案
不引入 Vue/React，又想获得基础数据驱动能力，可用极简响应式工具（如 signal 或 valtio）配合 Custom Element。关键在于把“数据变更”和“DOM 更新”解耦，由信号触发 render()，而非靠轮询或手动调用。
- 用
import { signal } from 'https://cdn.skypack.dev/@preact/signals@1'声明响应式值 - 在
connectedCallback中用effect(() => this.render())订阅信号变化 -
render()内部仍只操作shadowRoot，保持封装性 - 避免在
render()中做异步请求或复杂计算，否则影响渲染帧率
真正容易被忽略的是：**数据驱动不是“让页面动起来”，而是让“谁动、何时动、怎么动”变得可预测、可追溯、可测试**。原生组件化里缺的从来不是语法糖，而是这套契约——没有它，你写的每个 render() 都像在裸泳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
