Vue和React是现在比较主流的前端开发框架，我们主要从四个大方面对vue和react的框架进行浅谈比较：数据绑定、组件化和数据流、数据状态管理、渲染和更新。
一、数据绑定
Vue 在数据绑定上采取了双向绑定策略，依靠Object.defineProperty (Vue 3.0 已迁移到 Proxy)及监听 DOM 事件实现 具体实现方法已经在前面剖析过了，简单来说就是，为了监听数据的改变，需要对数据进行拦截/代理；对于监听视图的改变，需要对 DOM 事件（如 onlnput onChange等）进行监听。
Vue 实例中的data和模板展现在一条线上，无论谁被修改，另一方都会发生变动。
值得一提的是， Vue 也支持计算属性，即computed 属性，这个策略和 React-redux 中的mapStateToProps 有异曲同工之妙，都是通过计算将所需要的数据注入给组件使用。
需要区分清楚的是，双向绑定和单向数据流并没有直接关联：
1、双向绑定是指数据和视图之间的绑定关系
2、单向数据流是指组件之间的数据传递
React 中并没有数据和视图之间的双向绑定，它的策略是＂局部刷新”。
当数据发生变化时，直接重新渲染组件，便可以得到最新的视图，这种“无脑＂刷新的做法看似粗暴，却换来了简单直观 的效果，当应用中的数据发生变化时，只需要刷新即可，而且框架能够对这种刷新在性能上提供一定的保障。
二、数据状态管理
对于较为复杂的数据状态， Redux React 应用开发中最常用的解决方案 这里需要说明的是，Redux 和视图无关，它只是提供了数据状态管理的流程，因此在 Vue 应用开发中使用 Redux 是完全没有问题的。
当然，在 Vue 应用开发中更常用的是 vuex, 其借鉴了Redux, 具有和 Redux 相同的 store 概念，不允许组件直接修改store state, 而是需要使用 dispatch action 来通知 store 的变化 这个过程不同于Redux 的函数式思想，其中的一个区别是， Vuex 改变 store 的方法支持提交一个 mutation, Redux 并不支待。 mutation 类似于事件发布/订阅系统：每个 mutation 都通过 一个字符串来表示事件类型 (type) ，并通过 一个回调函数 (handler) 来进行对应的数据修改 。一个显著的区别是，在 Vuex 中， store 是被直接注入组件实例中的 因此用起来更加方便 ；而 Redux 需要通 connect 方法 propdispatch 注入组件中。
造成这些不同的本质原因可能有如下
1、 Redux 提倡不可变性，而 Vuex 的数据是可变的， Redux 中的 reducer 每次都会生成新的 state以替代旧的 state, 而 Vuex 是直接对其进行修改
2、 Redux 在检测数据变化时，是通过浅比较的方式比较差异的，而 Vuex 其实和 vue的原理一样，是通过遍历数据的 getter / setter 来比较的。
三、组件化和数据流
vue组件不像React组件，它不是完全以组件功能和 UI 为维度进行划分的，Vue 组件本质上是一个 Vue 实例。
每个实例在创建时都需要经过以下几个步骤：设置数据监听，编译模板，将模板应用到 DOM 上，而且要在更新时根据数据变化更新 DOM 的过程。在这个过程中，Vue 也像 React一样提供了类似组件的生命周期方法。
-
Vue 组件间通信，或者说组件间数据流，同 React 一样，也是单向的 它们在数据流向上也很类似，即通过 props 实现父组件向下传递数据， 基于 events 实现子组件向上发送消息给父组件。React 基于 props 的回调来实现子组件向父组件传递数据 (Vue 也支待）
当然，这两种框架也分别通过 context provide/inject 实现了跨层级数据通信，它们在这方面的实现也是非常类似的。
四、渲染和更新
React Redux 倡导不可变性，更新需要维持不可变原则 ；而 Vue 对数据进行了拦截/代理，因此它不要求维持不可变性 而允许开发者修改数据，以引起响应式更新。
React 更像 MVC MVVM 模式中的 View 层，但是与 Redux 等搭配后，它也是一个完整的 MVVM 类库,Vue 直接是 MVVM 模式的典型体现，虽然它一直标榜自己也只是 View 层，但是毫无疑问它本身包含了对数据的操作，比如， Vue 文档中经常会使用 VM （ViewModel 简称），这个变量名表示Vue实例，其命名会让人想到MVVM, 这是 MVVM 模式的体现。
React 所有组件的渲染都依靠灵活且强大的JSX, JSX并不是一种模板语言，而是 JavaScript表达式和函数调用的语法糖 在编译之后， JSX 被转化为普通的 JavaScript 对象，用来表示虚拟 DOM Vue template 是典型的模板，比 JSX 在表达上更加自然 在底层实现上， Vue 模板被编译成 DOM
渲染函数，结合响应系统，进行数据依赖的收集 Vue 渲染的过程如下：
1.通过 new Vue 语句实例化 Vue 对象
2.挂载 $mount 方法，通过自定义 Render 方法 template、 el 等生成 Render 函数，准备渲染内容
3.通过 Watcher 进行依赖收集
4.当数据发生变化时，执行 Render 函数并生成 VNode 对象
5.通过 patch 方法，对比新旧 VNode 对象，通过 DOM diff 算法添加、修改、删除真正的DOM元素
当然， 也可以支持 JSX。关于更新时的性能问题，简单来说，在 React 用中，当某个组件的状态发生变化时，它就会以该组件为根，重新渲染整个组件子树 。当然 ，我们可以使用 PureComponent, 或是手动实现shouldComponentUpdate 方法，来规避不必要的渲染 但是，这个实现过程要知悉数据状态结构，会产生一定的额外负担，比如，我们要进行精细的值比较等。在Vue 应用中，组件的依赖是在渲染过程中自动追踪的，因此系统能精确地知晓哪个组件需要被重渲染 从理论上看， 的渲染更新机制更加细粒度，也更加精确。
对比：
YonBuilder移动开发平台为移动应用开发提供了专业的低代码开发模式，采用自主研发的跨端引擎技术，前端使用H5和JavaScript作为开发语言，统一端API标准，通过模块化组装，一次开发实现跨平台IOS、Android、H5和小程序的移动应用开发，同时支持从开发、调试、发布、管理到运营的全生命周期管理。
点击立即体验：YonBuilder移动开发
2023-11-20 16:11:56
关注用友开发者中心
北京市海淀区北清路68号用友产业园
developer@yonyou.com