Vue和React的对比，各自的优势、MVC和MVVM的对比、_react mvc

Vue相比React的优点

1、Vue template 对比React的JSX ---- 模版的编写方面

template 更接近原生html，对于新手上手Vue更友好

2、对模版的预编译优化问题 ---- 模版的预编译方面

Vue3.0 提出的动静结合的 DOM diff 思想，编辑模板时，就为静态模版作标记，这样在更新时，进行新旧虚拟dom对比时，对于静态模版不做对比，就能够大大提高对比的效率。

React 采用JSX，虽然说提供了一定的灵活性，但是也导致了其更新就只能是局部重新渲染，从而它也就无法从模版层面进行静态分析。
当然，React 并不是没有意识到这个问题，他们在积极的同 prepack 合作。力求弥补构建优化的先天不足。

prepack 让你编写普通的 JavaScript 代码，它在构建阶段就试图了解代码将做什么，然后生成等价的代码，减少了运行时的计算量，就相当于 JavaScript 的部分求值器。

3、二者响应式所带来的最优更新，Vue是底层处理，React则需要手动优化 ------ 更新的优化方向

Vue 由于进行数据拦截/代理，因此对于数据的变化更敏感、更精确；你动了多少数据，就触发多少更新，它默认的就是最优的更新。

React 是由开发者手动调用 setState ，触发局部刷新的，同时，React 暴漏给开发者 shouldComponentUpdate这个方法，来让开发者自主判断该组件是否需要更新，从而来避免不需要的重新渲染，以达到最优的更新效果，这样就给开发者带来了额外的负担，需要让大家考虑更多，以达到最优的效果。

这样来看，Vue更省心。

4、二者对事件的处理，Vue中事件this指定组件实例，React则需要手动修改this指向，而且React中的事件并不是原生事件，而是经过包装的事件，它将所有事件都绑定在了document上 ------ 事件的处理方面

React 事件系统庞大而复杂。其中，它暴漏给开发者的事件不是原生事件，是 React 包装过合成事件，对所有事件都进行了代理，将所有事件都绑定 document 上。
同时，React 中事件处理函数中的 this 默认不指向组件实例，这个需要你去手动修改。

Vue 事件处理函数中的 this 默认指向组件实例，这样更省事。

5、Vue 和 React 实现复用 ----- 实现复用的方式上

复用可以具体分为UI的复用和逻辑的复用。

• UI的复用，通过对组件的复用，即可实现对UI的复用；
• 逻辑的复用，先后经历了 Vue2中的Mixin/extend ----> Vue3中的基于函数的相应的API、React中的Hooks（函数式编程），从而将逻辑复用和UI复用在一定程度上解耦，使其组合性更灵活。

参考链接：https://www.zhihu.com/question/301860721/answer/724759264

React相比Vue的优点

1、React的 Fiber， 时间分片的功能。

2、通过JSX，更灵活的html缩写

Vue的缺点

1、不支持IE8及其以下的浏览器

不支持不支持 IE8 及以下浏览器-----由于底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8 及以下浏览器

2、不利于SEO检索

不利于 SEO的优化-------- 由于百度等搜索引擎爬虫无法爬取 js 中的内容，故 SPA(单页面渲染)先天就**不利于 SEO的优化。

3、首屏加载的性能问题

首屏加载的性能问题------------csr 的先天不足，首屏加载的性能问题，例如：白屏时间过长

CSR：客户端渲染
SSR：服务器端渲染
参考地址：https://blog.csdn.net/weixin_39786582/article/details/83753225

**

React 和 Vue 的对比：

相同点：

• 使用 虚拟DOM (Virtual DOM)

  为什么Virtual DOM的能提高页面渲染性能？
  Virtual DOM是一个映射真实DOM的JavaScript对象
  如果需要改变任何元素的状态，那么首先在Virtual DOM上进行改变（而不是直接改变真实的DOM）
  然后，计算新旧Virtual DOM之间的差别（算法）
  最后，根据这些差别对真实的DOM增加、删除、修改、移动。

• 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

• 中心思想相同：一切都是组件，组件实例之间可以嵌套。

• 每个组件都提供合理的钩子函数，可以让开发者定制化地去处理需求。

• 专注于核心库，而将其他功能如路由和全局状态管理交给相关的库。

  Vue + Vue-Router + Vuex
  React + React-Router + Redux

不同点

• 1、数据绑定： 单向、双向
  React: 基于JSX编码, 单向数据绑定, 不能直接更新状态数据，必须通过setState()更新指定数据

• 2、模板管理：JSX、template模版
  Vue所有的模板使用的是近似常规HTML，只不过是新添加了一些属性

React所有的模板使用的是JavaScript的语法扩展——JSX书写

• 3、虚拟 DOM的区别

  • Vue的虚拟dom 宣称可以更快地计算出 Virtual DOM 的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
  • 对于 React 而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过 PureComponent/shouldComponentUpdate 这个生命周期方法来进行控制，但 Vue 将此视为默认的优化。

• 4、高阶组件的写法
  react 可以通过高阶组件（HOC）来扩展，
  Vue 需要通过 mixins、extends 来扩展

• 5、构建工具不同
  React ==> Create React APP
  Vue ==> vue-cli

• 6、跨平台—app开发
  Vue结合Weex框架，进行app的开发。
  React结合自身的React-native，进行app的开发。

参考链接 http://caibaojian.com/vue-vs-react.html

Vue的优点

• 1、轻量级框架：框架体积较小；
• 2、运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性
  能而言， vue 存在很大的优势。
• 3、简单易学：国人开发，中文文档
• 4、双向数据绑定
• 5、虚拟 DOM：解放 dom 操作，将dom相关操作，放入底层
• 6、视图，数据，结构分离：使数据的更改更为简单

MVC和MVVM的区别

MVC

• MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。

  C即Controller指的是页面业务逻辑。

  使用MVC的目的就是将M和V的代码分离。

  MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

MVP

MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller。

在MVC 模式中使用观察者模式，来实现当 Model 层数据发生变化的时候，通知 View 层的更新。这样 View 层和 Model 层耦合在一起，当项目逻辑变得复杂的时候，可能会造成代码的混乱，并且可能会对代码的复用性造成一些问题。

MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中Controller 只知道Model 的接口，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将Model 的变化和 View 的变化绑定在一起，以此来实现 View 和Model 的同步更新。

这样就实现了对 View 和 Model 的解耦，Presenter 还包含了其他的响应逻辑

MVVM

• MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。

  模型（Model）指的是后端传递的数据。

  视图(View)指的是所看到的页面。

  视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

  这两个方向都实现的，我们称之为数据的双向绑定。

• 为什么会出现MVVM
  前端开发中暴露出了三个痛点问题：
  1、开发者在代码中大量调用相同的 DOM API，dom操作比较繁琐。
  2、大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
  3、 当数据频繁发生变化， 开发者需要主动进行dom操作将其更新到 视图上 ；
  当用户的操作导致 数据 发生变化，开发者同样需要将变化的数据同步到 指定的数据变量中；
  这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

其实，早期 jquery 的出现就是为了前端能更简洁的操作 DOM，但它只解决了第一个问题，
另外两个问题始终伴随着前端一直存在。直到MVVM 的出现，完美解决了以上三个问题。

• MVVM的优点

  • 分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性:
  • 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动 dom 中解放出来，更多的专注业务逻辑的实现

• MVVM的缺点

  • Bug 很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异常了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。数据绑定使得⼀个位置的 Bug 被快速传递到别的位置，要定位出原始地⽅就变得不那么容易了
  • 对于⼤的应⽤程序，视图状态较多，ViewModel 的构建和维护的成本都会⽐较⾼

MVC和MVVM的区别

• 并不是VM完全取代了C，

  而是在MVC的基础上，VM抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。

  也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

作者：Aniugel
链接：https://www.jianshu.com/p/4db4b191de06
来源：简书