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上计算出最小更新内容,对页面进行最小更新。