请说明通过 JavaScript 实现视图与数据双向同步的具体机制，并给出可运行的代码示例。
考察说明
考查对 MVVM 双向绑定原理的理解及手写实现能力。
回答思路
- 【回答框架 1】双向数据绑定指数据模型变化自动更新视图，视图输入变化自动更新数据模型。核心机制是数据劫持加发布订阅。
- 【回答框架 2】使用 Object.defineProperty 重写 getter 和 setter，在 getter 中收集依赖（Watcher），在 setter 中通知所有 Watcher 更新视图。
- 【回答框架 3】为每个数据属性建立 Dep 对象，管理依赖列表；Watcher 在触发 getter 时将自己加入 Dep。
- 【回答框架 4】实现指令解析器（如 v-model）绑定输入事件，监听 input 事件将新值赋给数据，触发 setter 从而更新其他相关视图。
- 【回答框架 5】代码示例：定义 observe 函数遍历 data 属性，定义 Dep 类管理 Watcher，定义 Watcher 类接收更新回调，定义 Compile 函数解析绑定并创建 Watcher。
- 【关键点 1】Object.defineProperty 劫持属性，实现响应式。
- 【关键点 2】Dep 和 Watcher 组成发布订阅模式。
- 【关键点 3】视图更新通过数据驱动，避免手动操作 DOM。
- 【关键点 4】输入事件触发数据更新，形成双向闭环。
- 【易错点 1】不使用 observe 或 defineProperty，仅使用事件监听无法实现自动视图更新。
- 【易错点 2】忽略数组和对象新增属性的响应式处理，可能导致后续数据变化不触发更新。
- 【易错点 3】Dep 和 Watcher 的依赖收集逻辑错误会导致更新遗漏或重复更新。