Vue 的双向绑定如何工作？

介绍 Vue 的双向绑定机制及其在数据驱动视图和视图更新数据中的工作原理，包括响应式处理、依赖收集和发布 - 订阅模式。

Vue 中等双向绑定响应式 Vue.js

Vue 的双向绑定是实现视图（用户界面）与数据模型自动同步的机制，它使得数据的更新能自动反映在视图上，同时视图的修改（例如表单输入）也能自动更新相关数据。这一机制的关键在于两个方面：

数据驱动视图：在初始化过程中，Vue 对数据进行响应式处理。Vue 2 使用 Object.defineProperty() 来劫持对象属性的 getter/setter，而 Vue 3 则升级为 Proxy，实现对象整体变化监测。访问数据时触发依赖收集，建立依赖关系树（通过一个类似 Dep 的集合类）。数据变化后立即发布通知，通过发布-订阅模式让所有订阅该属性的观察者（例如 Watcher）执行更新视图操作。例如：
```
var vm = new Vue({ 
  el: '#app',
  data: { message: 'Hello Vue!' }
}); // 若 message 改变，视图将自动刷新
```
其流程：定义数据 → 通过 getter 收集依赖 → setter 通知订阅者 →重新渲染视图来同步新状态。
视图更新数据：这通常结合用户交互和指令实现。v-model 是核心指令用于表单元素（如 input），它绑定输入字段为“监听代理”，监听 input 等事件事件并调用回调函数改变底层 data。当视图内容被修改时（例如用户打字），事件触发会直接修改后端数据。例如 HTML 部分：
```
<input v-model="message"> 
```
视图到数据的同步基于事件驱动模式，由指令内置逻辑或用户定义处理程序实现无缝通信。

Vue 整合了发布-订阅模式来连接数据与视图：