vue和react的区别

概念

Vue 是一种渐进式框架，可以逐步应用到现有项目中，也可以作为完整的单页应用开发；React 更像是一个视图层库，它只负责应用的视图部分，其他功能如路由、状态管理等需要借助第三方库。

1.监听数据变化的实现原理不同

Vue通过getter/setter方法以及一些函数的劫持能精确知道数据的变化。

React默认是通过比较引用方式diff算法进行的，若不优化，会导致大量不必要的VDom的重新渲染。

2.数据流不同

Vue实现双向绑定：props可以双响绑定，组件与Dom之间可以通过v-moudel绑定。

React不支持双向绑定：提倡单向数据流，称之为onChange/setState模式。

3.组件通信的区别

Vue中有三种方式可以实现组件通信：

1. 父组件通过props向子组件传递数据或者回调，虽然可以传递回调，但是一般只传递数据；

2. 子组件通过事件向父组件发送消息；

3. 通过Vue2.2中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级。

React中有三种方式实现组件通信：

1. 父组件通过props向子组件传递数据或者回调；

2. 可以通过context进行跨层级的通信；

3. React本身不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数。

4.模板渲染方式不同

在表层上，模板的语法不同。React是通过jsx来渲染模板，Vue是通过一种拓展的html语法来进行渲染，但其实这只是表面现象，毕竟React并不必依赖jsx.

在深层上，模板的原理不同。本质的区别在于：React是在组件js代码中，通过原生js实现模板汇总的常见语法，比如插值、条件、循环等，都是通过js语法实现，更加纯粹、原生；而Vue是在和组件js代码分离的单独模板中，通过指令来实现的，比如条件语句v-if。

5.模板渲染过程不同

Vue可以更快的计算出Virtual Dom的差异，这是由于它在渲染过程中，会跟踪每个组件的依赖关系，不需要更新渲染整个组件树。

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期函数可以进行控制，但Vue将次视为默认的优化。

如果应用中交互复杂，需要处理大量的UI变化，那么使用Virtual Dom是一个好主意，如果更新不频繁，可以直接操控DOM。

6.框架本质不同

Vue本职是MVVM框架，有MVC发展而来。

React是前端组件框架，有都断组件演化而来。

Virtual Dom

首先对我们要将要插入到文档中得到Dom树结构进行分析，使用js对象将其表示出来。比如一个元素对象，包括tagName\props\children这些属性，然后我们将这个js对象树给保存起来，最后再将DOM片段插入到文档中。

当页面的状态发生改变，我们需要对页面的DOM结构进行调整的时候，我们首先根据变更的状态，重新构建一棵对象树，然后将这棵新树的对象树和旧的对象树进行比较，记录新旧两棵树的差异，最后将记录的有差异的地方应用到真正的到Dom树中去。这样视图就会更新。

我觉得Virtual Dom这种方法对我们需要有大量的Dom操作的时候能够很好地提高我们的操作效率，通过在操作前确定需要做的最小修改，尽可能的减少Dom操作带来的重流和重绘的影响。

其实VM并不一定比我们真实的操作Dom要快，这种方法的目的是为了提高我们开发时的可维护性，在任意的情况下都能保证一个尽量少的性能消耗去进行操作。

MVVM MVC MVP

MVC、MVP和MVVM是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。

比如在项目开发使用单页应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里,页面的渲染、数据的获取、对用户事件的响应，所有的应用逻辑都混合在一起。这样在开发的时候可能看不出什么问题，当项目一旦变得复杂，那么那个文件就会变得冗长混乱，这样对我们的项目开发和后期项目维护非常不利。

MVC

MVC是通过分离Moudel层、View层和Controller层的方式来组织代码结构。
其中View层负责页面的显示逻辑，Moudel层负责存储页面的业务逻辑以及相应数据的操作，并且Moudel和View层应用了观察者模式，当Moudel层发生改变时，它会通知有关View层更新页面。Controller层是Moudel和View层的纽带，主要负责用户和应用的响应操作，当用户和页面产生交互的时候，Controller中的时间触发器就开始工作了。通过调用Moudel层，来完成对Moudel层的修改，然后Moudel层再去通知View层更新。