JavaScript双向绑定通过响应式系统实现数据与视图自动同步：Vue 2用Object.defineProperty劫持属性的get/set，配合依赖收集与派发更新；Vue 3改用Proxy代理整个对象，支持动态属性与数组索引赋值；视图层通过监听input等事件并赋值触发数据更新，形成闭环。
JavaScript 实现双向绑定，核心在于建立数据与视图之间的自动同步机制：当数据变化时更新视图，当视图（如输入框）被修改时也反向更新数据。现代框架（如 Vue、Angular）的实现各有差异，但底层离不开几个关键技术点：响应式系统、依赖收集、派发更新和事件监听。
Object.defineProperty 是早期双向绑定的基础
Vue 2 使用 Object.defineProperty 对 data 对象的每个属性进行劫持：
- 通过 get 拦截读取操作，在此过程中收集当前正在执行的渲染函数（即“Watcher”）作为该属性的依赖；
- 通过 set 拦截赋值操作，触发所有已收集的依赖重新求值（即更新 DOM）；
- 对嵌套对象需递归处理，数组则需重写 push/pop 等方法才能触发更新。
Proxy 替代 defineProperty 成为更优选择
Vue 3 及许多新方案改用 Proxy，它能直接代理整个对象，无需逐个定义属性：
- 支持动态新增/删除属性的响应式；
- 天然支持数组索引赋值、length 修改等场景；
- 可拦截更多操作（如 in、deleteProperty、has），但需配合 Reflect 保证原语义。
视图层如何触发数据更新？靠事件监听 + 赋值操作
双向绑定不只是“数据→视图”，还必须有“视图→数据”。典型做法是：
立即学习“Java免费学习笔记（深入）”；
- 在 input、textarea 等元素上监听 input 或 change 事件；
- 事件回调中，把用户输入值赋给对应的数据字段（例如 vm.message = $event.target.value）；
- 这个赋值会触发上面提到的 set（或 Proxy 的 set trap），从而驱动视图更新，形成闭环。
依赖关系需要精准管理，否则容易重复或遗漏
一个响应式系统要稳定运行，离不开依赖追踪机制：
- 每个响应式属性维护一个 Dep（依赖池），存放所有依赖它的 Watcher；
- 每个 Watcher 在求值前，把自己设为当前活跃的 watcher，这样 get 中就能把它加入 Dep；
- set 触发时，遍历 Dep 中所有 Watcher，调用其 update 方法，触发 patch 或 re-render。
