请解释一下双向绑定的概念，并说明 Vue 中实现双向绑定的底层原理。

回答思路

1. 【回答框架 1】双向绑定是指视图与数据模型之间的一种自动同步机制，当数据变化时视图自动更新，当视图（如表单输入）变化时数据也会自动更新。在 Vue 中，这一机制是组件内数据与视图之间的双向连接。
2. 【回答框架 2】Vue 2 的实现原理是数据劫持结合发布-订阅模式。它通过 Object.defineProperty 递归劫持 data 中的每个属性，为其定义 getter 和 setter。在 getter 中收集依赖（订阅者 watcher），在 setter 中通知所有依赖的 watcher 数据发生了变化。与此同时，Vue 会解析模板中的指令（如 v-model）并创建对应的 watcher，当 watcher 被触发时，会调用其回调函数更新视图。
3. 【回答框架 3】对于表单元素（如 input），v-model 指令会在内部绑定 input 或 change 事件，当用户输入时触发事件处理函数，该函数将输入值赋值给对应的 data 属性，从而完成视图到数据的更新。反过来，当 data 属性被修改时，setter 触发，watcher 更新 DOM，完成数据到视图的更新，这样就形成了双向绑定。
4. 【回答框架 4】在 Vue 3 中，实现原理改为使用 Proxy 来代理响应式数据，它可以监听对象属性的新增和删除以及数组索操作，比 Object.defineProperty 更全面且性能更好。但双向绑定的核心机制仍然是依赖收集与派发更新。
5. 【回答框架 5】具体而言，双向绑定利用了事件监听和数据劫持两个层面的配合，使数据和视图始终保持同步。理解这一原理有助于在性能优化和排查问题时形成正确的思路。
6. 【关键点 1】双向绑定是数据与视图之间的自动化同步机制。
7. 【关键点 2】Vue 2 使用 Object.defineProperty 实现数据劫持，Vue 3 使用 Proxy。
8. 【关键点 3】核心流程为：数据变更触发 setter，通知 watcher，watcher 更新视图；视图变更通过事件监听更新数据。
9. 【易错点 1】不要混淆双向绑定与单向数据流，单向数据流是父子组件之间的 prop 传递规则，不与双向绑定冲突。
10. 【易错点 2】在 Vue 中，双向绑定主要适用于表单元素，默认不覆盖所有组件。
11. 【易错点 3】不要误以为 Vue 2 的 Object.defineProperty 能监听数组下标变化，这是它的局限，Vue 3 的 Proxy 则没有此问题。