HTML5 本身不提供数据绑定机制，需通过 JavaScript 手动实现 DOM 与 JS 对象同步；input 的 value 属性仅初始化时读取，后续需用 addEventListener("input") 等方式手动双向绑定。
HTML5 本身不提供数据绑定机制——data binding 是前端框架（如 Vue、React、Angular）的特性，不是 HTML5 标准的一部分。所谓“HTML5 绑定数据对象”，实际是指在原生 HTML5 环境中，通过 JavaScript 手动实现 DOM 与 JS 对象之间的同步更新。
为什么 input 的 value 属性和 JS 对象不同步？
常见误区是以为给 设置了初始值，后续修改 JS 对象就会自动反映到输入框上。其实：value 属性只在初始化时读取一次，之后 DOM 和 JS 对象完全解耦。
典型错误现象：
- 修改
obj.name = "new"，但页面上的文本没变 - 用户手动输入后，再读
obj.name还是旧值，没更新
根本原因：HTML5 没有监听属性变化的能力，必须靠 JS 主动干预。
立即学习“前端免费学习笔记（深入）”；
用 addEventListener("input") 实现双向同步
这是最轻量、兼容性最好、也最可控的手动绑定方式，适用于表单控件（input、textarea、select）。
实操建议：
- 监听
"input"而非"change"，确保实时响应（后者只在失焦时触发） - 绑定前先从对象取值设为初始
value，避免 DOM 初始状态与数据不一致 - 对每个字段单独绑定，不要试图写一个通用“绑定函数”去处理所有类型——容易忽略
checkbox的checked、select的selectedIndex等差异
const user = { name: "张三", age: 28 };
document.getElementById("nameInput").value = user.name;
document.getElementById("nameInput").addEventListener("input", e => {
user.name = e.target.value;
});
document.getElementById("ageInput").value = user.age;
document.getElementById("ageInput").addEventListener("input", e => {
user.age = Number(e.target.value);
});
Object.defineProperty 能否用于数据劫持？
可以，但仅限于简单对象 + 非 IE8 以下环境；现代开发中基本被 Proxy 取代，且它无法监听数组索引赋值（如 arr[0] = 1）或新增属性。
关键限制：
- 必须提前声明所有要监听的属性名，动态添加的属性不会触发 setter
- 无法监听嵌套对象深层变化（需递归定义）
- Vue 2 使用它，但 Vue 3 已切换到
Proxy
不推荐新手用它做数据绑定——调试困难、兼容性差、易漏边界 case。
真想“自动绑定”？该选 Proxy 还是框架？
Proxy 是目前唯一能拦截对象任意操作（读、写、删除、in、遍历等）的原生方案，但它仍需你手动触发 DOM 更新，不能替代模板系统。
比如：
- 用
Proxy拦截user.name = "李四"，你可以触发重绘，但得自己写document.getElementById("nameInput").value = ... - 没有模板语法，无法像
{{ user.name }}那样声明式渲染 - 性能敏感场景下，过度代理会带来可观开销
结论：纯 HTML5 + JS 场景下，“绑定”本质是事件监听 + 手动赋值；若项目规模稍大，直接用 Vue 或 Alpine.js 这类轻量框架更省力、更可靠。别为了“不用框架”硬造轮子——DOM 更新逻辑很容易漏掉异步、批量、嵌套等复杂点。
