JavaScript原生无双向绑定，可用Object.defineProperty（Vue 2）或Proxy（Vue 3）实现响应式；前者兼容IE9+但无法监听新增属性/数组索引赋值，后者支持动态属性、数组操作但需递归代理嵌套对象。
JavaScript 原生没有内置的双向数据绑定机制，但可以用 Object.defineProperty 或 Proxy 拦截属性读写，实现简易响应式绑定。现代框架（如 Vue 2 / Vue 3）的底层原理就源于此，但直接手写时要注意兼容性、嵌套对象、数组变更等常见盲区。
用 Object.defineProperty 绑定单层对象属性
这是 Vue 2 的核心方式，适用于 IE9+，但无法监听新增/删除属性或数组索引赋值。
- 必须提前声明所有需要响应的属性，否则后续
obj.newProp = xxx不会触发更新 - 每个属性需单独定义
get和set，不能批量处理整个对象 -
set中要避免直接赋值引发无限循环：用Object.getOwnPropertyDescriptor获取原始描述符，或缓存原值
示例：
function observe(obj, key, callback) {
let val = obj[key];
Object.defineProperty(obj, key, {
get() { return val; },
set(newVal) {
if (newVal !== val) {
val = newVal;
callback(newVal);
}
}
});
}
const data = { message: 'hello' };
observe(data, 'message', (v) => console.log('changed:', v));
data.message = 'world'; // → 'changed: world'
用 Proxy 实现更健壮的响应式代理
Proxy 是 Vue 3 的基础，能拦截属性读写、in、deleteProperty、数组 push/pop 等操作，且支持动态属性。
立即学习“Java免费学习笔记（深入）”；
- 只能代理对象本身，不能代理其原型链上的属性（需手动处理
has和get中的in判断） - 嵌套对象仍需递归
proxy，否则深层修改不触发回调 - 对数组长度赋值（如
arr.length = 0）或直接索引设置（arr[1] = x）可被拦截，但部分方法（如splice）需重写或包装
示例（简化版）：
function reactive(obj, callback) {
return new Proxy(obj, {
set(target, key, value) {
const result = Reflect.set(target, key, value);
callback(key, value);
return result;
}
});
}
const state = { count: 0 };
const proxy = reactive(state, (key, val) => console.log(`${key} → ${val}`));
proxy.count = 5; // → 'count → 5'
把数据变化同步到 DOM 元素（简易 v-model 模拟）
数据绑定最终要反映在视图上。最简方式是监听输入事件 + 属性变更，再反向更新 input 的 value。
- 仅处理
<input>、<textarea>、<select>，其他元素需额外判断（如checked） - 注意避免因 DOM 更新触发再次
input事件，造成死循环 —— 应只在非用户输入时才更新 DOM - 推荐用
data-xxx属性标记绑定字段名，例如<input data-bind="message">
关键逻辑片段：
function bindInput(el, data, key) {
el.value = data[key];
el.addEventListener('input', () => {
data[key] = el.value;
});
// 数据变化时更新视图（需配合 observe 或 reactive 的 callback）
}
真正实用的数据绑定不是只做一次赋值，而是要覆盖属性增删、嵌套变更、数组操作、异步更新队列等场景。哪怕只是教学用途，也建议优先用 Proxy 起手，并立刻加上递归代理和数组方法劫持 —— 否则很容易在真实业务中掉进“为什么这个属性改了没刷新”的坑里。
