Vue与React的异同

一、相同点：

1. 都用虚拟dom实现快速渲染
2. 都支持组件化，都有props（properties）的概念，允许父组件往子组件或孙组件传送数据（不允许子组件改变父组件传来的props值）
3. 都是数据驱动视图
4. 都支持服务端渲染
5. 都有管理状态，React有redux,Vue有Vue、
6. 都有支持native的方案，React的React native，Vue的weex
7. 都有组合功能，React使用 Hoc（高阶组件)，Vue使用mixins（混合）

8. 都有自己的构建工具，可以快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli

 二、不同点：

1. 实现原理不同

1） react 函数式组件思想（diff算法，react只对比节点的key和tag）

react中数据发生变化（调用setstate时），render函数就会执行，重新生成一个新的虚拟dom， 就会遍历 diff 当前组件所有的子节点子组件，新旧比较，得出差异然后渲染。 react 16 采用了 fiber 把Dom树微观化成链表，可以中断的，分片的在浏览器空闲时候执行，提高diff效率。

2） vue 组件响应式思想 （diff算法，vue对比key、tag还有其他属性）

vue组件中数据发生变化，会触发setter，由于vue组件中数据的getter的作用，收集了依赖，setter触发会根据这些依赖，生成新的虚拟dom，然后对比新旧虚拟dom进行渲染。 采用代理监听数据，在组件内修改数据，就通过虚拟DOM去更新页面，而组件间通过响应式通知更新。

2. 设计结构不同

vue使用的是可变数据，数据由data属性在vue对象中管理，

React 更强调数据不可变，由setState()更新状态

3. 数据流不同

vue是通过v-model进行双向数据流，react是单向数据流，一般通过setState/onChange

注：

        1）双向数据流和数据双向绑定不是一回事，react单向数据流也可以双向绑定数据，例如表单的事件绑定。

        2）双向数据流是说数据的流向是双向的；双向数据绑定指的是单纯的数据与视图层之间的绑定。实质上也是单向数据流在加上用户的操作事件来实现双向数据绑定。无论是单向数据还是双向,最终呈现给用户的都是同步效果.只不过是一个需要手动实现,一个自动。

        3）双向绑定把数据变更的操作隐藏在框架内部，调用者并不会直接感知。Vue 中的 v-model 来说，他是一个语法糖，利用 bind 语法与事件来实现数据与视图之间的绑定。

4. 渲染方式的不同

React是通过JSX渲染模板，等计算完毕之后在渲染；

Vue是通过一种拓展的HTML语法进行渲染，边计算边渲染

5.框架本质不同

Vue本质是MVVM框架，由MVC发展而来。

React是前端组件化框架，只针对MVC的view层。

6. 通信方式不同

vue: 父通过props向子传递数据或回调（一般传数据）；子通过事件向父发消息；通过provide /  inject 来实现父向子注入数据，可跨层级传递。

react：父通过props向子传递数据或回调；子通过回调向父发消息；通过 context进行跨层级的通信。

参考：

详解单向数据流与双向数据绑定_mytheart的博客-CSDN博客_双向绑定和单向数据流

Vue 和 React 的区别__小小怪_的博客-CSDN博客_vue和react区别