Vue和React框架比较

现在是主流的前端开发框架。我们主要从数据绑定、组件化和数据流、数据状态管理、呈现和更新四个方面对vue的框架进行比较和反应。

1、 数据绑定

 nbsp； ；Vue在数据绑定中采用双向绑定策略，依赖于Object。之前已经分析了defineProperty（Vue 3.0已迁移到Proxy）和监控DOM事件的具体实现方法。简单地说，数据需要被拦截/代理以监控数据变化；要更改侦听视图，您需要侦听DOM事件（例如onnput onChange）。

 nbsp； ；Vue实例中的数据和模板显示在同一行。无论谁被修改，对方都会改变。

 nbsp； ；值得一提的是，Vue还支持计算属性，即计算属性。该策略与React redux中的mapStateToProps相似，它通过计算将所需数据注入组件。

 nbsp； ；需要区分的是，双向绑定和单向数据流并不直接相关：

 nbsp； ；1.双向绑定是指数据和视图之间的绑定关系

 nbsp； ；2.单向数据流是指组件之间的数据传输

 nbsp； ；React中的数据和视图之间没有双向绑定。其政策是“本地刷新”。

 nbsp； ；当数据更改时，可以直接重新渲染组件以获得最新视图。这种“无脑”的提神方法看似粗糙，但它有一种简单直观的效果。当app中的数据发生变化时，您只需要刷新，框架可以为该刷新的性能提供一定的保证。

2、 数据状态管理

 nbsp； ；对于更复杂的数据状态，需要注意的是，在开发Redux Reactapp时最常用的解决方案是，Redux与视图无关，它只提供数据状态管理的过程，因此在Vueapp开发中使用Redux没有问题。

当然，vuex更常用于Vueapp开发。它借鉴了Redux，与Redux有着相同的商店概念。不允许组件直接修改存储状态。相反，他们需要使用分派操作来通知商店的更改。这个过程与Redux的功能理念不同。其中一个区别是，Vuex更改商店的方法支持提交突变，而Redux不支持。变异类似于事件发布/订阅系统：每个变异使用一个字符串来表示事件类型，并使用回调函数（处理程序）来修改相应的数据。一个显著的区别是，在Vuex中，存储直接注入到组件实例中，因此使用起来更方便；Redux需要使用connect方法propdispatch来注入组件。

 nbsp； ；这些差异的主要原因可能如下

 nbsp； ；1.Redux提倡不变性，而Vuex数据是可变的。每当Redux中的reducer生成新状态以替换旧状态时，Vuex都会直接修改它

 nbsp； ；2.当检测数据变化时，Redux使用浅层比较来比较差异。Vuex和vue一样，使用getter/setter来比较数据。

3、 组件化和数据流

 nbsp； ；与React组件不同，vue组件并没有完全按照组件功能和UI维度划分。Vue组件本质上是Vue实例。

 nbsp； ；每个实例在创建时都需要经历以下步骤：设置数据监视、编译模板、将模板应用于DOM，以及根据数据更改更新DOM。在此过程中，Vue还为React等类似组件提供了生命周期方法。

 nbsp； -

 nbsp； ；Vue组件之间的通信或组件之间的数据流是单向的，就像React一样。它们在数据流方向上也类似，即父组件通过props向下传输数据，子组件基于事件向上发送消息给父组件。React基于props的回调将数据从子组件传输到父组件（Vue也支持）

 nbsp； ；当然，这两个框架还通过上下文提供/对象实现了跨级别的数据通信，在这方面它们的实现非常相似。

4、 渲染和更新

 nbsp； ；React Redux提倡不变性，更新需要保持不变性原则；Vue拦截/代理数据，因此不需要保持不变性，并允许开发人员修改