JavaScript数据绑定核心是建立数据与DOM关联并自动同步更新，主要实现方式有：1.发布-订阅模式（手动维护依赖）；2.Object.defineProperty+观察者模式（Vue 2.x，不支持动态属性）；3.Proxy+Reflect（现代推荐，支持数组/嵌套/动态属性，IE不兼容）；4.脏检查（AngularJS 1.x，性能差已淘汰）。
JavaScript 实现数据绑定，核心是让数据变化自动反映到视图（UI），同时用户操作视图也能同步更新数据。它不是语言原生特性，而是通过编程模式和机制模拟“响应式”。关键在于建立数据与 DOM 的关联，并在数据变更时触发更新逻辑。
发布-订阅模式（Pub/Sub）
这是最基础、也最易理解的数据绑定实现方式。数据对象作为“发布者”，视图监听器作为“订阅者”，当数据发生变化时主动通知所有监听器更新 UI。
- 需手动维护依赖关系：比如给属性加 setter，在其中调用 notify()；每个绑定点（如 input、span）注册 update() 回调
- 适合轻量场景，例如小型表单联动或配置面板
- 缺点是耦合较重，监听器需显式注册/销毁，容易内存泄漏
Object.defineProperty + 观察者模式
ES5 主流方案，通过劫持对象属性的 getter/setter 拦截读写，配合依赖收集与派发更新。
- Vue 2.x 底层即采用此方式：对 data 对象每个属性调用 defineProperty，getter 中收集当前正在求值的 Watcher（依赖），setter 中通知对应 Watcher 更新
- 局限明显：无法监听新增/删除属性、不支持 Map/Set、对数组索引赋值或 length 修改无效（需重写数组方法）
- 需递归遍历对象，深层嵌套对象要逐层代理，性能与初始化开销较大
Proxy + Reflect（现代推荐方案）
ES6 引入 Proxy 可代理整个对象，拦截 get/set/deleteProperty/has/ownKeys 等 13 种操作，天然支持数组、动态属性、嵌套对象。
立即学习“Java免费学习笔记（深入）”；
- Vue 3 Composition API 和 SolidJS 等新框架均基于 Proxy 实现响应式系统
- 一次代理即可覆盖所有属性访问，无需递归初始化；能精确追踪依赖路径（如 obj.user.name）
- 注意：Proxy 返回的是新对象，原对象不可响应；IE 不支持，需考虑兼容性
脏检查（Dirty Checking）
AngularJS 1.x 使用的方式：不劫持数据，而是在特定时机（如 digest cycle）遍历所有已注册的 watcher 表达式，比对新旧值是否变化。
- 无须修改数据结构，兼容任意 JS 对象甚至第三方库数据
- 性能随 watcher 数量线性下降；需手动触发 $digest 或依赖 $apply 包裹异步操作
- 开发体验较差，调试困难，现代框架基本弃用
