Vue 与 React 的双向绑定 ｜ 青训营
Vue：
- 监听器（Observer）：Vue 通过使用一种被称为 "响应式系统" 的机制来实现双向绑定。在这个机制中，Vue 会通过递归地遍历数据对象，将其属性转化为 getter/setter，并为每个属性添加一个依赖追踪的系统。这样一来，当属性被访问或修改时，Vue 就能够捕捉到，并通知相关的依赖。
- 模板编译（Template Compilation）：Vue 的模板编译器会解析 Vue 模板，并生成一个渲染函数。这个渲染函数可以接收数据对象作为参数，并根据数据对象和模板生成对应的视图。
- Watcher（观察者）：在模板编译过程中，Vue 会为模板中的每个表达式创建一个 Watcher 对象。Watcher 对象会订阅数据对象中的属性，并将自身添加到属性的依赖列表中。当属性发生变化时，它会接收到通知。
- Dep（依赖收集器）：Dep 是一个依赖收集器，它管理着 Watcher 对象。每个被观察的属性都会有一个对应的 Dep 对象。当属性被访问时，Watcher 会被添加到 Dep 的依赖列表中。当属性发生变化时，Dep 会通知所有的 Watcher 对象，然后 Watcher 会触发视图的更新。
- 双向绑定：Vue 的双向绑定是通过结合上述机制实现的。当数据发生变化时，由于属性的 setter 中已经添加了依赖追踪的逻辑，Vue 会通知相关的 Watcher 对象，然后 Watcher 会触发视图的更新。反之，当视图中的表单元素发生变化时，Vue 会捕捉到变化事件，并更新数据对象中对应的属性，从而完成数据的双向绑定。
React：
- 组件渲染：React 使用 JSX 语法编写组件的模板，然后通过编译器将 JSX 转换为 JavaScript。在组件的渲染过程中，React 会创建一个虚拟 DOM 树（Virtual DOM），它是一个轻量级的 JavaScript 对象结构，对应着真实的 DOM。
- Virtual DOM 的比较：当组件的状态或属性发生变化时，React 会重新渲染组件，并生成一个新的虚拟 DOM 树。然后，React 会将新旧虚拟 DOM 树进行比较，找出需要更新的部分。这个比较过程是高效的，因为虚拟 DOM 树的结构简单，并且在比较过程中会使用一些优化算法。
- 差异更新：在比较新旧虚拟 DOM 树时，React 会找出需要更新的部分，并生成一系列的 DOM 操作指令。这些指令描述了如何将新的虚拟 DOM 树转换为真实的 DOM，以达到更新视图的目的。React 会尽量减少实际的 DOM 操作次数，从而提高性能。
- 单向数据流：React 的数据流是单向的，即从父组件向子组件传递数据。当父组件的数据发生变化时，React 会重新渲染父组件，并递归地更新子组件。这种单向数据流的机制保证了数据的一致性和可追踪性，简化了组件之间的数据交互。
- 表单元素绑定：对于表单元素（如 input、textarea），React 提供了受控组件的机制来实现双向绑定。受控组件通过将表单元素的值与组件的状态进行绑定，使得表单元素的值由状态控制。当表单元素的值发生变化时，React 会更新组件的状态，从而实现视图和数据的同步更新。
根本的不同之处：
- 响应式系统 vs 虚拟 DOM：Vue 使用响应式系统来实现双向绑定，它通过将数据转化为 getter/setter，并建立依赖追踪来自动追踪数据变化并更新视图。React 则使用虚拟 DOM，通过比较新旧虚拟 DOM 树的差异，以最小化 DOM 操作来更新视图。
- 双向绑定的范围：Vue 的双向绑定是默认行为，它在模板中使用 v-model 指令可以直接实现表单元素和组件数据的双向绑定。React 的双向绑定则需要通过显式地编写代码来实现，通常使用受控组件的方式将表单元素的值与组件的状态进行绑定。
- 数据流的方向：Vue 的双向绑定支持数据的双向流动，即数据的变化会自动更新视图，视图的变化也会更新数据。React 的数据流是单向的，数据从父组件向子组件单向传递，通过重新渲染组件来更新视图。
- 依赖追踪 vs 差异更新：Vue 的响应式系统通过依赖追踪实现数据和视图的自动更新，只更新发生变化的部分。React 则通过比较新旧虚拟 DOM 树的差异来确定需要更新的部分，并通过差异更新的方式来更新视图，减少实际的 DOM 操作
