Vue 和 React 数据绑定 Virtual Dom

React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM

提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

 

数据绑定

双向绑定和单向绑定

单向绑定：将View绑定到Model，Model数据更新，View就会自动更新。

双向绑定：用户更新View，Model的数据也自动更新（如表单等）

Flux架构（Redux，Vuex）：统一状态管理。组件不允许直接修改Store中的数据，而是触发相应的action来分发（dispatch）事件通知store去改变。Store中的数据改变后，订阅（subscribe）该数据的View会触发相应的action来更新。

只有UI组件才有讨论双向绑定或单向绑定的意义。

单向绑定（单向数据流）的好处是便于进行统一的状态管理，可以记录变更、保存状态快照、实现回滚等。缺点是代码量比较大。

双向绑定的好处是代码量较小（如多级联动form表单等）。缺点是状态管理变得不易管理。

 

React是单项绑定。对于一个React组件，流程是用户在View上的操作触发相应的function，function更新组件数据，重新渲染组件。对于使用React-redux的应用来说，流程是：用户在View上的操作触发相应的Redux action，分发（dispatch）事件通知store更新数据。store数据更新后，会通知订阅（subscribe）该数据的组件触发action，更新组件数据，重新渲染视图。

Vue支持双向绑定，是通过Object.defineProperty实现的。每个Vue实例都会有一个watcher，记录该组件实例渲染过程中接触过的data数据。给Vue实例中的每个`data`数据注册getter/setter函数，从而在数据setter函数触发数据发生变化时通知watcher。watcher发现数据改变则更新View视图。

 

Virtual Dom：

在数据和真实 DOM 之间建立了一层缓冲。对于开发者而言，数据变化了就调用 React 的渲染方法，而 React 并不是直接得到新的 DOM 进行替换，而是先生成 Virtual DOM，与上一次渲染得到的 Virtual DOM 进行比对，在渲染得到的 Virtual DOM 上发现变化，然后将变化的地方更新到真实 DOM 上。

为什么需要Virtual Dom：

虽然JS操作DOM对其节点的修改操作相对较快，但是Dom改变，浏览器重新计算CSS，重新布局（layout）的速度相对耗时。

JS引擎很快，于是引入Virtual Dom，每一批次数据改变需要重新渲染页面时，先通过diff算法在virtual dom上计算出最小更新内容，对页面进行最小更新。