单向数据绑定需手动监听数据变化并调用渲染函数实现“数据→视图”更新，Proxy或Object.defineProperty仅拦截读写，不自动渲染；适合只读场景，复杂交互需双向或显式提交。
单向数据绑定不是靠框架“自动实现”的，而是靠手动监听 + 更新
JavaScript 本身没有原生的单向数据绑定机制。所谓“单向数据绑定”，本质是：数据变化 → 触发视图更新，但用户操作 DOM（如输入框输入）不会反向修改数据源。这需要你主动建立“响应链”——监听数据变化，再调用更新函数。
常见错误是以为 Object.defineProperty 或 Proxy 一设就自动渲染了；其实它们只负责拦截读写，渲染逻辑必须你自己写、自己调用。
- 适合轻量场景：比如配置页、只读仪表盘、表单预览区
- 不适合复杂交互：一旦需要用户编辑后同步回数据，就得升级成双向（或显式提交）
-
Proxy比Object.defineProperty更适合嵌套对象监听，但 IE 完全不支持
用 Proxy 实现基础单向绑定：监听 set + 触发 render
核心是拦截赋值动作，在 set 中执行视图更新。注意：不能在 set 里直接操作 DOM（易导致重复渲染或性能问题），应节流或统一调度。
const data = { message: 'Hello' };
const handler = {
set(target, key, value) {
target[key] = value;
render(); // 你自己的更新函数
return true;
}
};
const observed = new Proxy(data, handler);
这里 render() 必须是你定义的函数，比如更新 document.getElementById('msg').textContent。没有它，Proxy 只是“静默监听”，什么也不会发生。
立即学习“Java免费学习笔记（深入）”；
- 不要在
render()里无差别重绘整个页面，应只更新关联节点 - 如果
data是深层对象，Proxy默认不递归代理子属性，需手动处理嵌套 - 避免在
set中触发新的赋值（如target.other = xxx），否则可能无限循环
为什么不用 Object.defineProperty？兼容性与局限性现实约束
Object.defineProperty 能实现类似效果，但有硬伤：无法监听新增/删除属性，也不能监听数组索引赋值（如 arr[0] = 1）或 length 变化。Vue 2 的响应式系统正是因此受限。
典型错误写法：
const obj = {};
Object.defineProperty(obj, 'name', {
set(val) {
this._name = val;
updateView(); // ❌ this 指向可能丢失，且无法监听 obj.age = 'xxx' 这种新增
}
});
- 必须提前声明所有要绑定的字段，动态添加的属性不会触发 set
- 对数组常用方法（
push、pop、splice）无效，得重写原型方法 - IE9+ 支持，但 Vue 2 在 IE9 下仍有诸多 patch 补丁，说明底层不干净
真实项目中，单向绑定常被简化为“状态快照 + 显式刷新”
多数业务代码并不需要实时响应式。更常见、更可控的做法是：把数据当作不可变快照，每次变更后调用一次 render(state)，由渲染函数决定怎么更新 DOM。
例如：
function render(state) {
document.getElementById('title').textContent = state.title;
document.getElementById('count').textContent = state.count;
}
// 使用时：
state = { ...state, count: state.count + 1 };
render(state); // ✅ 主动触发，逻辑清晰，调试方便
这种模式规避了 Proxy/defineProperty 的陷阱，也更容易做性能优化（比如加个 if (prev.count !== next.count) 再更新）。
真正容易被忽略的是：单向不等于“不能响应用户操作”。用户点击按钮修改数据，再调用 render，仍是单向——只要你不让 input 的 input 事件直接改 state 字段。
