Vue 的双向数据绑定是怎么实现的？

1. 数据到视图的自动同步

Vue 的双向数据绑定指数据变化时视图自动更新，视图变化时数据也同步更新。在数据到视图的方向上，Vue 通过响应式系统监听数据变化，一旦数据改变就自动重新渲染对应的 DOM。开发者无需手动调用 DOM 操作 API，只需关注数据本身。

2. 视图到数据的同步

在视图到数据的方向上，Vue 通过指令和事件机制实现。最典型的是 v-model 指令，它在表单元素和组件上建立双向绑定：输入框的值变化时，绑定的数据自动更新；数据变化时，输入框显示的内容也随之更新。v-model 本质上是 :value（或 :model-value）绑定与 input 事件监听的语法糖。

3. 与单向数据流的关系

需要区分双向绑定与组件通信中的单向数据流原则。Vue 组件的 props 遵循单向数据流——父组件向子组件传递数据，子组件不应直接修改 props。当需要子组件向父组件传递变化时，应通过自定义事件通知父组件修改，从而保持数据流向清晰、可追踪。