浅谈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 中并没有数据和视图之间的双向绑定，它的策略是＂局部刷新”。
当数据发生变化时，直接重新渲染组件，便可以得到最新的视图，这种“无脑＂刷新的做法看似粗暴，却换来了简单直观 的效果，当应用中的数据发生变化时，只需要刷新即可，而且框架能够对这种刷新在性能上提供一定的保障。

组件化和数据流

vue组件不像React组件，它不是完全以组件功能和 UI 为维度进行划分的，
Vue 组件本质上是一个 Vue 实例。
每个实例在创建时都需要经过以下几个步骤：设置数据监听，编译模板，将模板应用到 DOM 上，而且要在更新时根据数据变化更新 DOM 的过程。在这个过程中，Vue 也像 React一样提供了类似组件的生命周期方法。
-
Vue 组件间通信，或者说组件间数据流，同 React 一样，也是单向的 它们在数据流向上也很类
似，即通过 props 实现父组件向下传递数据， 基于 events 实现子组件向上发送消息给父组件。
-
React 基于 props 的回调来实现子组件向父组件传递数据 (Vue 也支待）
当然，这两种框架也分别通过 context provide/inject 实现了跨层级数据通信，它们在这方面的
实现也是非常类似的

数据状态管理

对于较为复杂的数据状态， 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 方法 prop
dispatch 注入组件中。
-
造成这些不同的本质原因可能有如下
1、 Redux 提倡不可变性，而 Vuex 的数据是可变的， Redux 中的 reducer 每次都会生成新的 state
以替代旧的 state, 而 Vuex 是直接对其进行修改
2、 Redux 在检测数据变化时，是通过浅比较的方式比较差异的，而 Vuex 其实和 vue的原理一样，
是通过遍历数据的 getter / setter 来比较的

渲染和更新

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 应用中，组件的依赖是在渲染过程中自动追踪的，因此系统能精确地知晓哪个组件需要
被重渲染 从理论上看， 的渲染更新机制更加细粒度，也更加精确。

引用前【端开发核心知识进阶】等书籍的内容，仅用于更好的学习和理解

问与答

双向绑定和单向数据流并没有直接关联：

1、双向绑定是指数据和视图之间的绑定关系
2、单向数据流是指组件之间的数据传递

1、为什么 React 事件处理函数需要手动绑定this, 而React生命周期函数却不需要手动绑定this？

答：React对生命周期函数做了this绑定，因为生命周期函数名是确定的，React可以很好的做绑定，
但是事件处理函数完全是开发者自己确定的，React无法预测该绑定哪些函数， 所以这还得需要开发者自己来做。
最土的方法就是在构造函数中bind，用箭头函数也可以。

2、为什么Vue可以实现双向绑定？

答：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
实现数据的双向绑定，首先要对数据进行劫持监听，所以需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。