html5本身不提供双向数据绑定机制，需通过javascript手动实现：input的value属性仅初始化时读取，后续必须用addeventlistener("input")监听并同步更新js对象与dom。
原生 HTML 没有双向数据绑定——value 属性只在初始化时生效，后续修改 JS 对象不会自动更新 input，用户改了 input 也不会自动存回对象。必须手动桥接，否则永远不同步。
为什么 input.value = obj.name 不等于双向绑定
这是最常踩的坑：赋值一次后就断联了。DOM 和 JS 对象之间没有监听机制，HTML5 标准里压根没这功能。
-
input.value = obj.name只设置初始值，之后obj.name = "新值"不会触发 input 更新 - 用户在 input 里打字，
obj.name仍保持旧值，除非你主动读取e.target.value -
value是 DOM 属性（property），不是 HTML 属性（attribute）；getAttribute('value')拿到的是初始 HTML 字符串，不是当前输入内容
用 addEventListener("input") 实现最小可行双向同步
这是兼容性最好、逻辑最直白的手动方案，适用于 input、textarea、select。
- 先同步初始值：
input.value = user.name - 监听
"input"事件（不是"change"），确保每敲一个字都捕获 - 在事件回调里反向写回对象：
user.name = e.target.value - 注意数字字段要转类型：
user.age = Number(e.target.value)，否则会变成字符串
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);
});
checkbox 和 select 的绑定不能套用 input 模板
它们的状态属性不是 value，直接复用上面逻辑会出错。
-
checkbox看checked属性：cb.checked = user.agree，监听"change"（"input"不可靠） -
select多数用selectedIndex或value，但需确保 option 的value与数据一致 - 多选
select要遍历selectedOptions，不能只读value - 别试图用一个通用函数自动推导所有控件类型——字段语义（如是否布尔、是否多选）必须显式声明
Proxy 方案比 Object.defineProperty 更适合现代项目
Object.defineProperty 只能劫持已存在的属性，新增字段不会响应；Proxy 可拦截整个对象，包括动态添加的 key。
- 对嵌套对象也天然支持，不用递归 define
- 但 IE 完全不支持，若需兼容旧浏览器，只能降级为手动监听
- 实际更新视图的逻辑（比如改
div.innerHTML）仍需你自己写，Proxy 只负责“知道变了”，不负责“怎么更新” - 不要在 Proxy 的
set里直接操作 DOM——容易触发重入或性能问题，建议发通知或队列更新
真正麻烦的从来不是绑一个 input，而是处理表单里几十个字段、各种控件类型、初始值来源不一、校验规则穿插其中。手动绑定写多了自然会想封装，但过早抽象反而增加心智负担——先跑通一个字段，再复制粘贴改两行，比啃框架文档快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
